ページのスクロールを滑らかに移動する
スクロールが長い場合などに利用させるページのスクロールを滑らかに移動します。
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;
}
};