jQueryを上下にスクロールするための上下矢印ボタンの作成方法

Question

1つのページに5つのセクションを1つずつ含む単一のページのWebサイトを作成しています。 私はこれらのボタンを使用してスクロールするユーザーを助けるために、スクロールバーの近くにUp &の下矢印を2つのボタンが必要です。 これらのボタンは、それぞれ次のセクションの前の&に順次スクロールする必要があります。 基本的に全身をスクロールしています。

たとえば、ナビゲーションは、ホーム、About、プロジェクト、ギャラリー&にあります。

[ホーム]をクリックして下矢印をクリックすると、本文が[バージョン情報]までスクロールして停止する必要があります。 [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> 

はありがとうございます。

Answer 1

あなたは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