Question

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

请检查我发布的链接是否在临时服务器上，因此尚无ssl证书，因此您可以忽略安全警告并继续访问该链接。

Answer 1

您可以在scrollTop方法中使用Jquery 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>

如何在手风琴打开和关闭时修复HTML表单滚动

1 个答案: