ページ内リンクをスムーススクロールさせるjQueryプラグイン「jquery.smoothScroll」

jquery.smoothScrollは、ページ内リンクをクリックした時に、スルスルッとスムーススクロールさせるためのjQueryプラグインです。

動きについては、以下でデモを確認することができます。

このjQueryプラグインは、モンキーレンチのキタジマタカシさんが作成したもので、コチラの記事で裏話とかも書かれています。

jquery.smoothScrollの導入手順

1. GitHubからjquery.smoothScrollをダウンロードします。
2. jquery.smoothScroll.jsをサーバーにアップロードします。
3. 以下のようにjQueryとjquery.smoothScroll.jsを読み込みます。

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/js/jquery.smoothScroll.js"></script>

</body>の直前に記述すればOKです。

4. ページ内リンクを設置すれば完了です。

<a href="#header">ページトップへ</a>

これだけで、ページ内リンクをクリックした時に、スルスルッと移動してくれるようになります。

jquery.smoothScroll.js内の以下を変更することで、オプションをカスタマイズすることもできます。

jQuery(function($) {
$('a[href^="#"]').SmoothScroll({
duration : 2000, // スピード（ミリ秒）
easing : 'easeOutQuint' // 動き（イージング）
});
});

導入も簡単で非常に使いやすいと思います。スムーススクロールのプラグインは色々あると思いますが、迷ったらjquery.smoothScrollで決まりです。