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，这可以使效果更明显。

部分ID不适用于视差滚动网站

2 个答案: