スムーズにスクロールする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拍手お返事
Comment