読者です 読者をやめる 読者になる 読者になる

jubo的学習記録

日々自分の技量のなさに悩みながら這いつくばって頑張っているエンジニアが勉強・学習したことの記録です。

ページの最上部(TOP)に戻るボタン

本日の業務中、

JSで手っ取り早くページ内の最上部(TOP)に戻る処理が必要になったので、メモしておく。

onclickイベントを利用してもいいし、関数として変数に代入しても問題ない。

document.body.scrollTop = document.documentElement.scrollTop = 0;

ただし、こちらの処理は実行されるとアニメーションなしで最上部に戻されます。

ユーザー目線だとページが高速で切り替わっているように見えます。


ついでに、アニメーションを利用するならどうしたらいいかも調べました。

業務では使わなかったけど。

$('html,body').animate({scrollTop: 0}, 300);

数値「0」が高さ0を表し、数値「300」移動スピードを表しています。