HTMLの設定
htmlCopy code
<button class="goTop">トップへ戻る</button>
JavaScriptを使用したスムーズスクロールの実装
// JavaScriptを使用した場合のスムーズスクロールの実装
document.querySelector('.goTop').addEventListener('click', function () {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
jQueryを使用したスムーズスクロールの実装
// jQueryを使用した場合のスムーズスクロールの実装
$('.goTop').click(function () {
$('html, body').animate({
scrollTop: 0
}, 800); // スムーススクロールの速度
return false;
});
速度の変更
スムーズスクロールの速度を変更するには、animate()
メソッド(jQuery)または scrollTo()
メソッド(JavaScript)内の時間を変更します。以下に、JavaScriptとjQueryで速度を変更する例を示します。
JavaScriptの場合
window.scrollTo({
top: 0,
behavior: 'smooth',
duration: 2000 // アニメーションの時間(ミリ秒)
});
jQueryの場合
$('.goTop').click(function () {
$('html, body').animate({
scrollTop: 0
}, 2000); // アニメーションの時間(ミリ秒)
return false;
});