如何使jQuery向上和向下箭頭按鈕一步一步滾動身體？

我在一個頁面上創建了一個在另一個下方的5個部分的單頁網站。我需要兩個按鈕，上滾&滾動條附近的向下箭頭可幫助用戶使用這些按鈕進行滾動。這些按鈕應分別順序滾動到前面的&下一節。基本上我們滾動整個身體。如何使jQuery向上和向下箭頭按鈕一步一步滾動身體？

例如，導航是謊言家，關於，項目，畫廊&聯繫。

當在家中，並點擊向下箭頭，身體應該滾動到關於並停止。如果在關於，向上按鈕應該帶我們到主頁部分。

我是一個jQuery n00b所以，請幫助我的代碼示例。

到目前爲止的代碼：

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

謝謝。

來源

2012-04-20 Vineonardo

的jQuery的（相對）容易，但你怎麼定義你的'部分'？你能否在整個頁面上顯示代表性標記？提供一個[JS小提琴]（http://jsfiddle.net/）供我們使用？你有沒有試過任何東西？我們很樂意提供幫助，但是爲*做這件事*你稍微超出了Stack Overflow的範圍。 – 2012-04-20 10:47:46

您可以使用jQuery的動畫功能：

<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

來源

2012-04-20 10:49:59 ThdK

如何使jQuery向上和向下箭頭按鈕一步一步滾動身體？

回答

相關問題