Скрол таблицы до выбранной строки
 

Здравствуйте!

На странице есть таблица

<table class="table-with-border" id="dataList">
  <tr>
    <td>Поле 1</td>
    <td>Поле 2</td>
    <td>Поле 3</td>
    <td>Поле 4</td>
  </tr>
</table>

Есть скрипт фильтра по все отрисованной таблице

<script src="../assets/js/filter-table.js" type="text/javascript"></script>
  <script type="text/javascript">
    (function($) {
      $(document).ready(function() {
        $("#dataList").filterTable("#filter");
      });
    })(jQuery);
</script>

Этот скрипт при вводе текста в поле находит в таблице нужное и все остальные данные прячет.
В свою очередь в таблице текст в каждой строке является ссылкой. чтобы при выборе нужной строки она окрашивалась, чтобы пользователь понимал на какой строке остановился

<tr <?= $datas["id_item"] == $item_id  ? 'style="background: #aecaff;"' : "" ?>>
  <td>
	<a href="page.php?&item_id=<?= $datas["id_item"] ?>" style="color:#000">тут инфа из базы</a>
  </td>
  <td>
	<a href="page.php?&item_id=<?= $datas["comment"] ?>" style="color:#000">тут еще инфа из базы</a></a>
  </td>
</tr>

вопрос вот в чем. Мы нашли нужную строку по фильтру и кликнули ее. Страница обновилась и фильтр сбросился. при этом искомая строка выделена цветом, как и задумывалось. Но эта строка улетела куда-то далеко вниз.
Как после клика искомой строки и соответственно обновления страницы прокрутить страницу до этой самой строки?

Надо навешивать на эту строку какой-нибудь класс. Например selected
Что то типа такого

<tr <?= $datas["id_item"] == $item_id  ? 'class="selected" style="background: #aecaff;"' : "" ?>>

А потом когда страница загрузится, найти эту строку по классу и скролиться к ней

const selrow = document.querySelector('.selected');
selrow?.scrollIntoView();