jQueryでページ内リンクを、スルスル滑らかに移動させる簡単スムーススクロール

smoothScroll.jsは、
ページ内のリンク先をスルスル気持ち良く移動する人気jsライブラリーです。

ただ、わざわざライブラリー使わなくてもjQueryでできるので、
テンプレ用に書き留めておきます。

デモもありますので、参考にしてください。

jQuery版スムーススクロール

こちらのメリットは
・コードが少なく簡単。
・URLが変化しない。
（アドレスバーに「#id名」が付かない。）

↓ページ内リンクした後、アドレスバーがページURLのママ。

↓「ページURL#id名」とならない。

▼デモ
http://jewelcafe.main.jp/hatena_jquery/SC/index.html

☆手順☆

head内にjquery.jsを入れる（違うバーションでも多分大丈夫）

<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>

html

<p><a href="#link">ページ内を滑らかにリンクします。</a></p>
<p id="link">リンク先です。</p>

スムーススクロール用jQueryは↓こちら。
（head内に書いても外部ファイルにしても。）

$(function(){
   // #で始まるアンカーをクリックした場合に処理
   $('a[href^="#"]').click(function() {
      // スクロールの移動速度
      var speed = 400; // ミリ秒
      // アンカーの値取得
      var href= $(this).attr("href");
      // 移動先を取得
      var target = $(href == "#" || href == "" ? 'html' : href);
      // 移動先を数値で取得
      var position = target.offset().top;
      // スムーススクロール
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
   });
});

＊オプション

・「speed =400; 」 の所でスピード設定できます。
・動き方は最後「.animate」の「speed」の値、「linear」or「swing」が設定できます。
（linear→直線的な一定の動き、swing→最初はゆっくりで徐々に早くなる）

＊160929修正

$('a[href^=#]') → $('a[href^="#"]')
↑に変更しました。

jQuery2.x系など新しいjQueryバージョンは、ダブルクォーテーション（「""」）が無いと実装できないみたいです。
・jQuery 1.11.3まではOK。
・WordPressもバージョンアップ時に、jQuery Migrateのバージョンが上がり実装できなくなる可能性があります。
（WordPress4.4まではOK。WordPress4.5以降NG。）

---