javascript - 如何使 jQuery 向上和向下箭头按钮逐步垂直滚动正文？

Question

我正在创建一个单页网站，该网站在一个页面上包含 5 个部分。我需要两个按钮，滚动条附近的向上和向下箭头来帮助用户使用这些按钮进行滚动。这些按钮应分别依次滚动到上一个和下一个部分。基本上我们正在滚动整个身体。

例如，导航是 Home、About、Projects、Gallery & Contact。

在主页上并单击向下箭头时，正文应滚动到关于并停止。如果在关于，向上按钮应该将我们带到主页部分。

我是 jQuery n00b，所以请帮我提供代码示例。

到目前为止的代码：

<div id="arrows">
<a href="javascript:;" id="arrow-up">&uarr;</a>
<a href="javascript:;" id="arrow-down">&darr;</a>
</div>

谢谢你。

Answer 1

您可以使用 jquery animate 函数：

<div id="HomeSection">
   <h2>Home</h2>
   <input type="button" onclick="scollWin('AboutSection');" value="Scroll to Next" />     
</div>

<div id="AboutSection">
    <h2>About</h2>
    <p>About your page....</p>
    <input type="button" onclick="scollWin('HomeSection');" value="Scroll to Previous" />
    <input type="button" onclick="scollWin('ProjectSection');" value="Scroll to Next" />
 </div>

查询：

function scrollWin(id){
   $('html,body').animate({
      scrollTop: $("#" + id ).offset().top
   }, 2000);
}

源码和演示：链接