Tweet

JavaScript jQueryを使ってページトップ（上部、先頭）へ戻る。自作スクロール。

JavaScript jQueryを使ってページトップ（上部、先頭）へ戻るサンプル、自作スクロール。

jQueryでページトップへ戻る

a要素のhref属性に#だけ書くと瞬時にページトップ（上部、先頭）へ移動する。

<a href="#">ページトップへ戻る</a>

サイトの中には徐々にスクロールしてページトップへ戻るものもあるが、これはjQueryを利用すると簡単にできる。
リンクの表示方法や見た目などを抜きにすれば、以下のコードだけ書けば良い。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<a href="#" id="jstest">ページトップへ戻る</a>

<script>
$(function(){
	$('#jstest').click(function(){
		$('html, body').animate({scrollTop: 0}, 'normal');
		return false;
	});
});
</script>

'normal' というのはスクロール（アニメーション）のスピードで、slow、normal、fast、またはミリ秒で指定して変更できる。
ただ実は normal は存在せず、slow、fast 以外の文字列だとデフォルトの400ミリ秒になるらしい。

ページトップへスクロールするスクリプトを自作する

jQueryを使わずにページ上部へスクロールするスクリプトを書いてみた。

<a href="#" id="jstest">ページトップへ戻る</a>

<script>
var intervalID;

function my_scroll(){
	window.scrollBy(0, -80);
	if(window.pageYOffset <= 0){
		clearInterval(intervalID);
	}
}

document.getElementById("jstest").addEventListener("click", function(e){
	e.preventDefault();
	intervalID = window.setInterval(my_scroll, 10);
}, false);
</script>

e.preventDefault はリンクをクリックしたときの本来の動作をキャンセルしている。
これがないとスクリプトが動作する前にすぐにページトップへ移動してしまう。
javascript:void(0)などイベントをキャンセルする方法はいろいろあるが、それについては リンクのクリックを無効にする に書いた。
setInterval では my_scroll 関数を指定した間隔で実行している。
my_scroll 関数では徐々にページの上へスクロールしていき、ページ上部からのスクロール量が0以下になったら clearInterval で my_scroll が実行されるのを中止する。
見やすいように関数を分けて書いたが、なるべくグローバル変数や関数名を使いたくないので、上記のスクリプトをまとめると以下のようになる。

<a href="#" id="jstest">ページトップへ戻る</a>

<script>
document.getElementById("jstest").addEventListener("click", function(e){
	e.preventDefault();
	var intervalID = window.setInterval(function(){
		window.scrollBy(0, -80);
		if(window.pageYOffset <= 0){
			clearInterval(intervalID);
		}
	}, 10);
}, false);
</script>

scrollBy による移動量や setInterval による発生（遅延）間隔を変えるとスクロールスピードが変わってくる。
縦方向のスクロール処理しか書いていないが、横方向もスクロールしたい場合はその処理を追加すれば良い。
スクロールのテストをするためにページに数字を並べるスクリプトも以下に書いておく。

<div id="moji"></div>

<script>
window.addEventListener("DOMContentLoaded", function(){
	var moji = "";
	for(let i=1;i<=150;i++){
		moji += i + "<br>";
	}
	document.getElementById("moji").insertAdjacentHTML("afterbegin", moji);
}, false);
</script>