部分 id 在视差滚动网站上不起作用

Question

我有一个视差滚动网站，上面有箭头指示用户他们需要向下滚动才能查看内容。

我希望用户能够单击箭头，然后滚动到相关部分。据我了解，我需要做的就是向该部分添加一个 ID，然后在箭头的 href 标记中引用它。我有以下内容，由于某种原因无法正常工作，只是将 ID 添加到 URL 的末尾，但不会向下滚动：

HTML：

<!-- Button -->
<a class="green-arrow" href="#backupsection">
   <img  src="img/green-arrow.svg">
</a>

<!-- Backup 2 -->
<section id="backupsection" class="background">
  <div class="content-wrapper-left">
    <p class="backup-text-title">Methods</p>
    <p class="backup-text">No surprises here then: tape as a primary backup method remains at an all-time low of 3%. This is the first year it hasn’t fallen – possibly indicative of how stubborn some legacy systems (often populated with static compliance data) can be.</p>
  </div>
</section>

Answer 1

你给你要点击的按钮一个类，然后给它们一个id“hook”

        <a class="button"  href="#about">About</a>
        <a  class="button" href="#service">Services</a>
        <a  class="button" href="faqs.html">Galleries</a>
        <a  class="button" href="#contact">Contact</a>

其余的都是用 jQuery 完成的，让它成为一个流畅的动画，而不是仅仅跳转到页面部分。这是笔：

http://codepen.io/damianocel/pen/wKKbjO

Answer 2

我做了一个简单的演示，也许你可以在上面做更多。

$(".green-arrow").click(function () {
    $("html, body").animate({
        scrollTop: $("#backupsection").offset().top
    }, 2000);
})

同时我特意做了一个div元素，两个元素之间的高度为1000px，这样可以让效果更明显。