トップへ戻るボタンの画像を用意してサーバにアップ
JavaScriptでこんなコードを読み込む
const backToTopButton = document.getElementById('back-to-top');
// ボタンをクリックしてトップにスクロール
backToTopButton.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
back-to-topの部分はCSS
/* 画面トップへのボタン */
#back-to-top {
position: fixed;
bottom: 50px;
right: 30px;
opacity: 0.7;
cursor: pointer;
}
/* 画面トップへのボタン画像を設定 */
#back-to-top {
background: url("https://book.tan-deki.com/img/up.png") no-repeat center center;
width: 60px;
height: 160px;
}