ページのスクロールを滑らかに移動する

スクロールが長い場合などに利用させるページのスクロールを滑らかに移動します。

scrollByメソッドで現在の位置から移動し、setTimeoutメソッドで最終地点になるまで繰り返します。

関数定義

JavaScript

/**
 * スムーススクロール
 * @param {number} [duration=400] スクロールの時間
 */
var smoothScroll = function(duration) {
	if (!duration) duration = 400;

	var startTime = remainder = startScroll = 0;

	var animateScroll = function() {
		if (!remainder) {
			startTime = (new Date).getTime();
			remainder = startScroll = window.scrollY;
			setTimeout(animateScroll);
			return;
		}

		var elapsedTime = (new Date).getTime() - startTime;

		remainder = startScroll - (startScroll * (elapsedTime / duration));

		window.scrollTo(0, remainder > 0 ? remainder : 0);

		if (elapsedTime < duration) setTimeout(animateScroll);
	};

	setTimeout(animateScroll);
};

HTML

<a href="#" id="page-top">ページの先端へ移動</a>

使い方

JavaScript

var pageTopElem = document.getElementById('page-top');

pageTopElem.onclick = function(e) {
	smoothScroll();

	// イベントの初期動作を停止
	if (e.preventDefault) {
		e.preventDefault();
	} else {
		e.returnValue = false;
	}
};

JavaScript逆引きリファレンス一覧へ戻る