JavaScriptでスムーズスクロールを実装する

公開日：2014年3月3日
最終更新日：2014年3月6日

ページ内リンクでページトップに戻る時に、スクロールがなめらかだとユーザーが違うページにジャンプしたと勘違いしなくてすみます。
このスムーズスクロールをJavaScriptで実装する方法を紹介します。

jQueryを使う方法

jQueryを他にも使っているなら、animate()を使ってスムーズスクロールが実装できます。

【記事執筆時の確認環境】
jQuery 1.11.0

以下はそのコードですが、#で始まるアンカーをクリックした時に動作するようになっています。

jQuery(function(){
	$('a[href^=#]').click(function() {
		var speed = 400;//スクロール速度 単位：ミリ秒
		var href= $(this).attr("href");
		var destination = $(href == "#" || href == "" ? 'html' : href);
		var position = destination.offset().top;
		$("html,body").animate({scrollTop:position}, speed, 'swing');
		return false;
	});
});

jQuery(function(){

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

var speed = 400;//スクロール速度単位：ミリ秒

var href= $(this).attr("href");

var destination = $(href == "#" || href == "" ? 'html' : href);

var position = destination.offset().top;

$("html,body").animate({scrollTop:position}, speed, 'swing');

return false;

});

JavaScriptのメソッドだけを使う方法

jQueryを使わず、JavaScriptのメソッドだけを使う方法です。

以下のコードを記述したjsファイルをインクルードします。

var up_timer;

function getPosition(){
	horizontal = document.body.scrollLeft || document.documentElement.scrollLeft;
	vertical = document.body.scrollTop  || document.documentElement.scrollTop;
}

function pageup(x,y){
	if (up_timer) {
		clearTimeout(up_timer);
	}
	if (y >= 1) {
		getPosition();
		var divisionY = (vertical-(vertical/7));
		var Y = Math.floor(divisionY);
		window.scrollTo(horizontal,Y);
		up_timer = setTimeout("pageup("+horizontal+","+Y+")",10);
	} else {
		window.scrollTo(horizontal,0);
		clearTimeout(up_timer);
	}
}

function scrollup(){
	getPosition();
	pageup(horizontal,vertical);
}

var up_timer;

function getPosition(){

horizontal = document.body.scrollLeft || document.documentElement.scrollLeft;

vertical = document.body.scrollTop || document.documentElement.scrollTop;

}

function pageup(x,y){

if (up_timer) {

clearTimeout(up_timer);

}

if (y >= 1) {

getPosition();

var divisionY = (vertical-(vertical/7));

var Y = Math.floor(divisionY);

window.scrollTo(horizontal,Y);

up_timer = setTimeout("pageup("+horizontal+","+Y+")",10);

} else {

window.scrollTo(horizontal,0);

clearTimeout(up_timer);

}

function scrollup(){

getPosition();

pageup(horizontal,vertical);

}

HTMLのリンクコードは以下のように記述します。

<a onclick="scrollup(); return false;" href="#container">ページの先頭へ</a>

1	<a onclick="scrollup(); return false;" href="#container">ページの先頭へ</a>

特集記事

WordPress の基礎から応用まで

Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
jQuery Mobile を基本から覚える

スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。