Question

我正在创建一个单页网站，在一个页面上有一个在另一个下面的5个部分。我需要两个按钮，Up＆amp;滚动条附近的向下箭头可帮助用户使用这些按钮滚动。这些按钮应按顺序滚动到上一个＆amp;下一节分别。基本上我们滚动整个身体。

例如，导航就是Home，About，Projects，Gallery＆amp;接触。

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

我是一个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>

Jquery的：

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

来源和示范：link

如何使jQuery Up＆amp;向下箭头按钮一步一步地垂直滚动身体？

1 个答案: