<a href="#table1">Go to Table 1</a>
...
<table id="table1">
  <!-- Table content here -->
</table>

Метод 2: JavaScript ScrollTo
Другой подход заключается в использовании функции JavaScript scrollToдля плавной прокрутки к таблице при срабатывании действия пользователя, например нажатия кнопки или элемента навигации. Вот пример:

<button onclick="scrollToTable()">Scroll to Table</button>
<script>
  function scrollToTable() {
    const table = document.getElementById('table1');
    table.scrollIntoView({ behavior: 'smooth' });
  }
</script>
...
<table id="table1">
  <!-- Table content here -->
</table>

Метод 3: CSS Scroll Snap
CSS Scroll Snap позволяет создавать прокручиваемые разделы, которые автоматически фиксируются на месте при прокрутке, обеспечивая плавную и интуитивно понятную навигацию. Применяя свойства CSS Scroll Snap к контейнеру таблицы, пользователи могут легко переходить к нужной таблице. Вот пример:

<style>
  .table-container {
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
  }
  .table {
    scroll-snap-align: start;
  }
</style>
<div class="table-container">
  <table class="table">
    <!-- Table content here -->
  </table>

  <table class="table">
    <!-- Table content here -->
  </table>

  <table class="table">
    <!-- Table content here -->
  </table>
</div>

В этой статье мы рассмотрели три различных метода прокрутки содержимого таблицы на веб-страницах. Используя якорные ссылки, функцию JavaScript scrollToили CSS Scroll Snap, вы можете улучшить взаимодействие с пользователем и облегчить посетителям поиск информации, которую они ищут. Независимо от того, являетесь ли вы веб-разработчиком или человеком, заинтересованным в повышении удобства использования веб-сайта, эти методы могут стать ценным дополнением к вашему набору инструментов.