2

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

たとえば、ナビゲーションは「ホーム」、「概要」、「プロジェクト」、「ギャラリー」、「連絡先」です。

ホームで下向き矢印をクリックすると、本文が [概要] までスクロールして停止します。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>

ありがとうございました。

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>

Jクエリ:

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

ソースとデモンストレーション:リンク

于 2012-04-20T10:49:59.643 に答える