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

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

ページ内リンクをスムーススクロールさせる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で決まりです。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

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