CSSを使用した「TOPに戻る」ボタンの実装方法

方法1: リンクを使用した実装 この方法では、リンクを作成し、JavaScriptを使用してページ上部へスクロールします。

HTML:

<a href="#top" id="back-to-top">TOPに戻る</a>

CSS:

#back-to-top {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px;
  background-color: #000;
  color: #fff;
  text-decoration: none;
}
#back-to-top.show {
  display: block;
}

JavaScript:

window.addEventListener('scroll', function() {
  var backToTopButton = document.getElementById('back-to-top');
  if (window.pageYOffset > 100) {
    backToTopButton.classList.add('show');
  } else {
    backToTopButton.classList.remove('show');
  }
});

方法2: スクロールイベントを使用した実装 この方法では、JavaScriptのスクロールイベントを使用して、ページが一定の位置より下にスクロールされた場合に「TOPに戻る」ボタンを表示します。

HTML:

<div id="back-to-top">TOPに戻る</div>

CSS:

#back-to-top {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px;
  background-color: #000;
  color: #fff;
}
#back-to-top.show {
  display: block;
}

JavaScript:

window.addEventListener('scroll', function() {
  var backToTopButton = document.getElementById('back-to-top');
  if (window.pageYOffset > 100) {
    backToTopButton.classList.add('show');
  } else {
    backToTopButton.classList.remove('show');
  }
});
document.getElementById('back-to-top').addEventListener('click', function() {
  window.scrollTo({top: 0, behavior: 'smooth'});
});

以上の方法を使用することで、ウェブページに「TOPに戻る」ボタンを実装することができます。適用する方法は、ウェブページの要件や好みに応じて選択してください。