本の旅5　ページトップへ戻るボタン

「本の旅」に2記事めをアップした

『ビーグル号航海記』の児童版では準主役の登場人物

そしてサイドバーを作る予定は変更して
まずフッターも別ファイル（footer.php）にした

そこから結局スタイルシートを弄り始めちゃったから
気に入ったデザインになるまで3日間ドハマりｗ

footer.phpにはお決まりのコピーライトと
ページトップに戻るボタンのJavaScriptを記述したが
そのボタンのためにスタイルシートが必要になったのだった

JavaScript

<div id="back-to-top"></div>

<script>
  const backToTopButton = document.getElementById('back-to-top');

  // ボタンをクリックしてトップにスクロール
  backToTopButton.addEventListener('click', () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  });
</script>

CSS

/* 画面トップへのボタン */
#back-to-top {
    position: fixed;
    bottom: 50px;
    right: 30px;
    opacity: 0.7;
    cursor: pointer;
}

/* 画面トップへのボタン画像を設定 */
#back-to-top {
    background: url('https://hon-no-tabi.site/img/backtotop.png') no-repeat center center;
    width: 50px;
    height: 50px;
}