【javascript】ある程度スクロールしたら現れる、ページトップに戻るボタンの作り方

ポイント

HTML

HTML

  <div id="topbutton">
    <a href="#top">▲TOPへ戻る</a>   <!-- ➀ -->
  </div>

CSS

CSS

#topbutton {
    /* ▼ボタンの表示位置を画面の右下に固定 */
    position: fixed; /* ➁  表示場所を固定 */
    bottom: 10px; /* 画面下端からの距離 */
    right: 30px; /* 画面右端からの距離 */
    oppacity: 0; /* ➂  ▼最初は非表示に */
    z-index: 10000; /* 前面に表示 */
  }

javascript

javascript

  window.addEventListener("scroll", function () {
    const topBtn = document.getElementById("topbutton");
    const scroll = window.pageYOffset;
    if (scroll > 1000) {      // ➃
      topBtn.style.opacity = 0.5;
    } else topBtn.style.opacity = 0; 
  });

参考

【Javascript】要素の高さを取得する方法。getBoundingClientRectについて