jQuery：ページ内リンクのスムーススクロール

2014/12/19 更新

jQuery：ページ内リンクのスクロールを滑らかにするsmooth scroll。

jQueryでプラグインを使わずにページ内リンクのスクロールをスムースにする方法です。

ページ内リンクのスクロールを滑らか（スムース／スムーズ）にするためのjQueryプラグインを見かけることは多いですが、スクロールのためだけに結構なファイルサイズを読み込むのは気が引けます。
また、縦に長いページで使用すると、速さに違和感があるものも少なくありません。
プラグインを使わず短いスクリプトで動いてくれて、移動距離が長くても違和感のないようにしてみました。
Windows/MacのChrome38、Firefox33、WindowsのIE6〜11、MacのSafari6.1で動作確認をしています。

HTML

HTMLは特段何も気にすることなく組んでください。
#wrapperや#headerなど、ページの最上部に位置する要素に任意のidが割当てられていればOKです。「ページトップ」など通常通りリンクを張ってください。

<div><a href="#header">ページトップ</a></div>

1	<div><a href="#header">ページトップ</a></div>

JavaScript

移動時間だけで早さを調整しようとすると、縦に長いページの場合に移動速度が速すぎる状態になってしまいます。なので、最低速度を設定の上で、移動距離の○分の1の倍率で速度を算出する仕組みになっています。

<script src="/js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
	var rate = 15;			//倍率
	var minspeed = 200;		//最低速度
	$("a[href^=#]").click(function() {
		var hash = this.hash;
		if(!hash || hash == "#")
			return false;
			var speed = Math.abs($(window).scrollTop() - $(hash).offset().top) / rate + minspeed;
			$('html,body')
				.animate({scrollTop: $(hash).offset().top}, speed, "swing");
		return false;
	});
});
</script>

$(document).ready(function(){

var rate = 15; //倍率

var minspeed = 200; //最低速度

$("a[href^=#]").click(function() {

var hash = this.hash;

if(!hash || hash == "#")

return false;

var speed = Math.abs($(window).scrollTop() - $(hash).offset().top) / rate + minspeed;

$('html,body')

.animate({scrollTop: $(hash).offset().top}, speed, "swing");

return false;

});

</script>

まずjQueryを読み込み、続いて、その下の15行のスクリプトを記述します。

動きタイプは、常に同じ速度の「linear」、加速のあと減速して止まる「swing」の2種類から選べます。12行目の最後、「”swing”」の部分で変更できます。
jQuery Easing Pluginを読み込めば、32パターンの動きの中から選択することが可能になります。Easing PluginはjQueryの後で読み込んでください。

<script src="/js/jquery.easing.1.3.js" type="text/javascript"></script>

1	<script src="/js/jquery.easing.1.3.js" type="text/javascript"></script>

jQuery 1.12.0以降でも動作するようにしたい場合は、6行目の冒頭

$("a[href^=#]")

1	$("a[href^=#]")

を、以下のように変更してください。

$('a[href^="#"]')

1	$('a[href^="#"]')

Demo

HTML

JavaScript

おすすめ記事