The current article
気持ち良いスクロールをするjQueryプラグイン
ページ内で「するすると」移動する、気持ち良いスクロールを出来るようにするjQueryプラグインを紹介します。 スムーススクロールを実装できるものはこれ以外にも色々ありますが、選択肢の一つにいかがでしょうか。
capture
まず↑サイトからjQuery.smoothScroll.jsをダウンロードし、フォルダーに放り込みます。
（下記ではjsフォルダー）
ヘッド内に下記のコード（jQueryとjQuery.smoothScroll.js）を読み込ませます。
簡単に書くとこんな感じでしょうか。
<html> <head> ・ ・ <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.smoothScroll.js"></script> ・ ・ </head> ・ ・
あとは普通にページ内リンクを設定します。
<div id="header"> ヘッダー内容 </div> <div id="content"> ・・ <a href="#header">ページトップへ</a> ・・ </div>
ご存じでない方への注釈。
到達点（リンク先）となる要素に、「id=”名前”」を付けます。上記の場合は「header」ですが、重複しなければお好きな名前で大丈夫です。
で、リンク元の「a href=””」（上記では6行目） に「#名前」のように、ハッシュ（#）をつけます。
リンク元をクリックすると、リンク先へスクロールします。
ダウンロードした「jquery.smoothScroll.js」ファイルを開くと、29行目？あたりに実行コードが記載されています。
お詫びと訂正
実行コードの修正箇所は、ファイル下部（81行目辺り）の間違いです。
お詫びして訂正致します。
jQuery(function($) {
$('a[href^="#"]').SmoothScroll({
duration : 2000, // スピード
easing : 'easeOutQuint' // 動き方
});
});
ココを変更することでスクロールのスピードや動き方（イージング）をカスタマイズすることもできます。
イージングの種類は「jQuery UI Effects – Easing demo」で確認できます。
この記事は、モンキーレンチ様のプラグインを紹介させて頂きました。
使いやすいプラグインをありがとうござます。
関連記事
