jQuery:「Page Scroller」でスムーズにスクロールする

jQueryの「Page Scroller」を使用して、ページ内リンク
スムーズスクロールした際の方法をメモします。

「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を読み込みます。

<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を指定し、ページ内リンクを張ります。
リンクをクリックするとスムーズにスクロールします。

<div id="top">ページトップ</div>
・
・
・
(省略)
<a href="#top">ページトップへ</a>

また、Page Scrollerを使用しない場合は下記のように、
ページ内リンクに「class=”nopscr”」を設定します。

<div id="top">ページトップ</div>
・
・
・
(省略)
<a href="#top" class="nopscr">ページトップへ</a>

他にもスクロールのスピードを変えることができたり、
色々とオプションがあるのでシンプルで使いやすいです。

  • このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です