【css】ふわっと！ページトップへ戻るボタン【javascript】

スクロールした時にふわっと表示され、トップに移動するときはスムーススクロールします。

1.htmlを記述する

<a id="pagetop" aria-label="ページのトップへ"><span></span></a>

aria-labelはwebアクセシビリティ対応を考慮

2.cssを記述する

html{
  scroll-behavior: smooth;
}
#pagetop {
  position: fixed;
  right: 40px;
  bottom: 20px;
  z-index: 5500;
  display: block;
  width: 42px;
  height:42px;
  cursor: pointer;
  background: rgba(0, 0, 0, .5);
  border: 1px solid #ffffff;
  border-radius: 4px;
  opacity: 0;
  transition: .5s;
}
#pagetop.visible {
  opacity: 1;
  pointer-events: auto;
}
#pagetop span {
  position: absolute;
  top: 16px;
  left: 11px;
  display: block;
  width:18px;
  height:18px;
  content:"";
  border-top:3px solid #ffffff;
  border-right:3px solid #ffffff;
  -webkit-transform: rotate(315deg);
  transform: rotate(315deg);
}

scroll-behaviorの対応ブラウザはmozillaでご確認ください。

3.javascriptを記述する

document.addEventListener('DOMContentLoaded', function () {
  const pagetop = document.getElementById('pagetop');

  window.addEventListener('scroll', function () {
    if (window.scrollY > 100) {
      pagetop.classList.add('visible');//縦方向のスクロール量が100以上の場合はclassを追加
    } else {
      pagetop.classList.remove('visible');//縦方向のスクロール量が100以下の場合はclassを削除
    }
  });

  pagetop.addEventListener('click', function () {
    window.scrollTo({
      top: 0,
    });
  });
});

4.サンプル