WEBプログラミング入門

トップに戻るボタンを作成

やりたいこと

コンテンツ幅は最大1000pxで、下に500px下がったら上に戻るアイコンを表示させる。ウィンドウ幅が1000px以下であれば右下に固定。1000px以上であれば1000pxの範囲内で右下に固定。 window.scrollY:MDN

コード

  • <script>
  •   let target = document.getElementById('to_top');
  •   window.addEventListener('scroll', function(){
  •   window.pageYOffset>500?target.classList.add('display'):target.classList.remove('display');});
  • </script>

コードの内容

上に戻るボタンのidをto_topとして垂直方向のピクセル数が500を超えていれば、上に戻るボタンにdisplayクラスを追加、500以下であればdisplayクラスを削除する。元に戻るボタンは最初はopacity:0として見えなくする。見えなくてもボタンが押せるのでvisibility:hiddenとして、クリックもできなくする。htmlにscroll-behavior:smooth(IE非対応)を使って戻るのが分かるようにする。transitionを設定してふんわりとボタンを表示させる。1000px以上の幅の時に、上に戻るボタンがはみ出ないように、left:auto;margin:0 0 0 940px;で幅内の右から60px部分に固定される。HTMLとCSSはサンプルページ 参照

関連リンク