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;
});