jQueryの「Page Scroller」を使用して、ページ内リンクを
スムーズにスクロールした際の方法をメモします。
「Page Scroller」はシンプルで簡単に設定することが可能です。
「Page Scroller」を読み込み、ページ内リンクをするだけで
スムーズにスクロールすることができます。
下記のリンク先でダウンロードできます。
バージョンは「Page Scroller -version 3.0.8」を使用しました。
※3.0.7以降は商用利用も無料です。
※jQuery1.9では動作しなかったのでjQuery1.8を使用しています。
■ Page Scrollerの使い方
【jQuery】
jQueryとPage Scrollerを読み込みます。
1 2 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script type="text/javascript" src="./jquery.page-scroller.js"></script> |
【HTML】
移動先にidを指定し、ページ内リンクを張ります。
リンクをクリックするとスムーズにスクロールします。
1 2 3 4 5 6 | <div id="top">ページトップ</div>・・・（省略）<a href="#top">ページトップへ</a> |
また、Page Scrollerを使用しない場合は下記のように、
ページ内リンクに「class=”nopscr”」を設定します。
1 2 3 4 5 6 | <div id="top">ページトップ</div>・・・（省略）<a href="#top" class="nopscr">ページトップへ</a> |
他にもスクロールのスピードを変えることができたり、
色々とオプションがあるのでシンプルで使いやすいです。