jQueryでページのトップへ戻る
スクロールしながらページのトップへ移動 スムーススクロール
jQuery
$(function () {
$('a[href="#"]').click(function() {
$('html,body').animate({
scrollTop: 0
}, 'fast');
// アニメーションなし
// $('html,body').scrollTop(0);
return false;
});
});
scrollTop: 0で画面一番上へ移動。
scrollTop: 300で上から300pxの位置へ移動。
scrollTop: $(document).height()で画面一番下へ移動。
非jQuery版
JavaScript
window.addEventListener('load', function() {
document.querySelector('a[href="#"]').addEventListener('click', function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
return false;
});
});
HTML
<a href="#">ページのトップへ</a>
サンプル
