最近はブログやホームページでのスムーズスクロールはどんなページでも見かけるようになりましたね。わたしが使っているFC2ブログでも上へ戻るスムーズスクロールは実装していたんですが、ページ内のリンクをスムーズにスクロールすることはしていなかったので、今回はページ内のリンクをクリックしたときに滑らかに移動させてみよう。
スムーズスクロールとは
スムーズスクロールとはページ内アンカーに滑らかにスクロールして移動する演出のことです。
最近ではページ内リンクを飛ばす際には当たり前のようにブログやホームページに実装されていますね。
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; のところは、スクロール移動時の速度を指定できます。
数字が大きくなるほど、ゆっくり動きます。これで、ページ内のリンクであればスムーズスクロールしてくれます。