コピペでOK！FC2ブログページ内リンクをスムーズスクロール

最近はブログやホームページでのスムーズスクロールはどんなページでも見かけるようになりましたね。わたしが使っているFC2ブログでも上へ戻るスムーズスクロールは実装していたんですが、ページ内のリンクをスムーズにスクロールすることはしていなかったので、今回はページ内のリンクをクリックしたときに滑らかに移動させてみよう。

Contents

スムーズスクロールとは
FC2ブログにページ内リンクをスムーズスクロールさせる方法
- HTML

スムーズスクロールとは

スムーズスクロールとはページ内アンカーに滑らかにスクロールして移動する演出のことです。

最近ではページ内リンクを飛ばす際には当たり前のようにブログやホームページに実装されていますね。

FC2ブログにページ内リンクをスムーズスクロールさせる方法

HTML

head内でjQueryを呼び出しましょう。


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

※すでにjQueryを呼び出してる場合は上記は必要ありません。

続いて、<head>～</head>内に下記のスクリプトを書きましょう。


<script type="text/javascript">
$(function(){
   $('a[href^=#]').click(function() {
      var speed = 500;
      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;
   });
});
</script>

var speed = 500; のところは、スクロール移動時の速度を指定できます。

数字が大きくなるほど、ゆっくり動きます。これで、ページ内のリンクであればスムーズスクロールしてくれます。