jquery - 如何修复 Accordion 打开和关闭时的 html 表单滚动

Question

我有一个带有打开和关闭 Accordion 的 html 表单 我遇到的问题是当我打开 Accordion 时它会向上滚动一点并且不会从 Accordion 标题中显示出来，我希望 Accordion 不要滚动到顶部而是从选定的标题中显示。

请检查我发布的链接，它位于临时服务器上，因此还没有 ssl 证书，因此您可以忽略安全警告并继续访问该链接。

Answer 1

您可以在 animate 方法中使用 Jquery scrollTop 属性来滚动到所需元素的顶部。使用 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>