Как исправить скрол страницы при клике на таб?

Для исправления скролла страницы при клике на таб в HTML можно использовать JavaScript. Вот подробный алгоритм, который позволит вам реализовать такую функциональность.

1. Создайте HTML-разметку для табов. Например, вы можете использовать элементы <div> для каждого таба, с атрибутом "data-tab" для уникальной идентификации таба. Например:

<div class="tab" data-tab="tab1">Tab 1</div>
<div class="tab" data-tab="tab2">Tab 2</div>
<div class="tab" data-tab="tab3">Tab 3</div>

2. Добавьте обработчики событий клика для каждого таба. Вы можете использовать JavaScript для добавления обработчиков событий, или же использовать атрибут "onclick" для каждого элемента <div>. Пример:

<script>
  document.querySelectorAll('.tab').forEach(function(tab) {
    tab.addEventListener('click', function() {
      // код для переключения между табами...
    });
  });
</script>

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

<script>
  document.querySelectorAll('.tab').forEach(function(tab) {
    tab.addEventListener('click', function() {
      // Скрыть активный контент
      document.querySelector('.active-content').classList.remove('active-content');
      
      // Отобразить контент текущего таба
      var tabId = tab.getAttribute('data-tab');
      document.getElementById(tabId).classList.add('active-content');
      
      // Изменить скролл страницы
      window.scrollTo(0, 0);
    });
  });
</script>

4. Добавьте CSS-стили для класса "active-content", чтобы задать видимость контента выбранного таба:

<style>
  .active-content {
    display: block;
  }
  
  .tab-content {
    display: none;
  }
</style>

Теперь, при клике на каждый таб, контент предыдущего таба будет скрыт, а контент текущего таба будет отображен. А также страница будет прокручиваться вверх при переключении табов.