2

我正在创建一个单页网站,该网站在一个页面上包含 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>

谢谢你。

4

1 回答 1

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);
}

源码和演示:链接

于 2012-04-20T10:49:59.643 回答