Как исправить HTML-прокрутку формы на гармошке

Question

У меня есть HTML-форма с открытым и закрытым аккордеоном, проблема у меня заключается в том, что когда я открываю аккордеон, он немного прокручивается вверх и не отображается из названия аккордеона, я хочу, чтобы аккордеон не прокручивался вверхувместо этого показать из выбранного заголовка.

Пожалуйста, проверьте ссылку, которую я разместил, она находится на временном сервере, поэтому еще не имеет сертификата ssl, поэтому вы можете игнорировать предупреждение системы безопасности и перейти к ссылке.

Answer 1

Вы можете использовать свойство Jquery scrollTop в методе animate для прокрутки к вершине требуемого элемента.С помощью селектора jquery выберите class или id необходимого элемента и вызовите offset().top, чтобы при нажатии кнопки страница прокручивалась вверх до нужного элемента:)

$("button").click(function() {
  $(".wrapper").css("display", "block");

  
  $('html,body').animate({
      scrollTop: $(".head1").offset().top
    },
    'slow');

});

.first {
  width: 100%;
  height: 1000px;
  background: #ccc;
}

.wrapper {
  display: none;
}

.title {
  font-weight: bold;
  font: sans-serif;
  color: red;
  font-size: 40px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="first">
  <button type="button">Click Me!</button>
  <div class="wrapper">
    <p class="title">TITLE</p>
    <h1 class="head1">Heading 1</h1>
    <h2 class="head2">Heading 2</h2>
    <ul class="list">
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
      <li>List item 4</li>
      <li>List item 5</li>
    </ul>
  </div>

</div>