【JavaScript】トップ（上）に戻るボタンでスクロールしたら表示・footerまで来たら止まる（固定）ように実装するメモ

上に戻るボタンでスクロールしたら表示されて、footerまで来たらいい感じにfooterの上で止まるようにしたいときのコードをメモしておく。

1 HTML
2 SCSS
3 JavaScript
4 参考にさせてもらったサイト

HTML

<div class="totop"></div>

SCSS

$pcwidth: 1170px;

.totop {
  right: 10px;
  display: block;
  z-index: 100;
  background-color: #ccc;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  padding: 10px;
  transition: .3s;
  position: relative;
  @media (min-width:$pcwidth) {
    right: calc(50% - #{$pcwidth}/2);
  }
  &::after{
    position: absolute;
    right: 12px;
    top: calc(50% - 5px);
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: rotate(-45deg);
  }
}//.totop

JavaScript

window.addEventListener('scroll', function () {
  const totop = document.querySelector(".totop");
  const bodyHeight = document.body.clientHeight;
  const windowScrollHeight = document.documentElement.clientHeight + document.documentElement.scrollTop || document.body.scrollTop || document.scrollingElement.scrollTop || window.pageYOffset || window.scrollY;
  const footerHeight = document.querySelector('.footer').clientHeight;
  if (bodyHeight - windowScrollHeight <= footerHeight) {
      totop.style.position = 'absolute';
      totop.style.bottom = footerHeight + -20 + 'px';
  } else {
      totop.style.position = 'fixed';
      totop.style.bottom = '15px';
  }
});

const pagetopBtn = document.querySelector('.totop');
pagetopBtn.addEventListener('click', () => {
  window.scrollTo({
    top: 0,
    behavior: "smooth"
  });
});

totop.style.bottom = footerHeight + -20 + ‘px’; の数字のところを変更すると、footerの好きな位置に設定できる。今回はfooterの上に少しかぶせたかったので-20に設定した。

const pagetopBtn =からの記述は、上に戻るボタン押したときにスムーズに上がるように設定。