WEBプログラミング入門

【JavaScript】スクロールすると上に戻るボタン

アイコンを用意する

svgアイコンを適当に用意する。

アイコンはコンテンツ幅の右下に表示して、下に200pxスクロールすると表示する例↓ window.scrollY:MDN

コード

html
  • <div id="to_top" class="hide">
  •   <a href="#">
  •    <img src="./img/top.svg">
  •   </a>
  • </div>
css
  • html{
  •  scroll-behavior: smooth;
  • }
  • .hide{
  •  position:fixed;
  •  bottom:10px;
  •  left:auto;
  •  width:50px;
  •  margin:0 0 0 930px;
  •  transition: 0.5s;
  •  opacity:0;
  •  visibility:hidden;
  • }
  • @media screen and (max-width: 1024px){
  •  .hide{
  •   right:10px;
  •   width:40px;
  •  }
  • }
  • .show{
  •  opacity:1;
  •  visibility:visible;
  • }
script
  • <script>
  •   const to_top = document.getElementById('to_top');
  •   window.addEventListener('scroll', ()=>{
  •   window.pageYOffset>200?to_top.classList.add('show'):to_top.classList.remove('show');});
  • </script>

コードの内容

スクロールイベントが発生するたびにスクロール値が200を超えているか判別し、trueなら#to_topにshowクラスを追加、falseならshowクラスを削除する。
opacity:0だけだとクリックイベントが発火するため、visibilityもhiddenにしておく。scroll-behavior(スムーズにスクロール)とtransition(アイコンをじわっと表示)は好みで変更する。
アイコンをコンテンツ幅の右下に固定するためのCSS(position:fixed;left:auto;margin:0 0 0 930px;)fixedのleftをautoにして左marginを幅に応じて設定

関連リンク