スムーズにスクロールするjQueryプラグイン「smoothScroll」

スムーズにスクロールするjQueryプラグイン「smoothScroll」

ページ内リンクをクリックしたときにスムーズにスクロールするためのjQueryプラグイン「smoothScroll」を導入しました。

ダウンロード

こちらからプラグイン「jquery.smoothScroll.js」をダウンロードします。

設置方法

<head>内でjQuery本体とダウンロードした「jquery.smoothScroll.js」を読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="js/jquery.smoothScroll.js"></script>

ページ内リンクを設定します。

<div id="page">

...

<a href="#page">▲page top</a>
</div>

カスタマイズ

jquery.smoothScroll.js内の89行目辺りにある実行コードのオプションを変更することでスクロールのスピードや動き方をカスタマイズすることもできます。

jQuery( function( $ ) {
    $( window ).on( 'load', function() {
        $( 'a[href^="#"]' ).SmoothScroll( {
            duration : 1000,
            easing : 'easeOutQuint'
        } );
    } );
durationスピード（ミリ秒）
easing動き（イージング） こちらにデモがあります

参考サイト

ページ内で気持ち良いスムーススクロールをするためのjQueryプラグイン作った。 | モンキーレンチ

下のボタンを押すと拍手送信＆メッセージフォームが開きます。→WEB拍手お返事

関連記事