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

【问题标题】：How to make jQuery Up & Down arrow buttons to scroll body vertically step by step?如何使 jQuery 向上和向下箭头按钮逐步垂直滚动正文？
【发布时间】：2012-04-20 10:42:28
【问题描述】：

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

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

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

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

到目前为止的代码：

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

谢谢。

【问题讨论】：

jQuery 的（相对）简单，但你如何定义你的“部分”？你能显示整个页面的代表性标记吗？提供JS Fiddle 供我们使用？您是否尝试过任何事情？我们很乐意提供帮助，但为您为做这件事有点超出了 Stack Overflow 的职权范围。

标签： javascript jquery html

【解决方案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>

jquery：

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

来源和演示：link

【讨论】：