スクロールで現れるトップへ戻るボタン

2021・05・02

＊リセットCSSを読み込ませた上でお試しください＊（今回はなくて大丈夫です！）

Webページを開いた直後など、画面を下にスクロールさせる前はトップへ戻るボタンは必要ないので消しておき、少し画面を下にスクロールさせるとトップへ戻るボタンが出現する機能のサンプルです。JavaScriptを使っていますが jQuery は使用していません。また、いきなりパッと現れたり消えたりすると違和感が出るため、フワッと表示・非表示になるようにCSSで設定しています。

サンプル表示の都合上、実際は position:fixed; とすべきところを、relativeを使っています。コードをコピペする際はpositionプロパティの値にご注意下さい！

画像１

画像２

画像３

画像４

画像５

画像６

上記のサンプルコードを掲載しています。学習用としてご自由にコピペしてお使い下さい。（※スクロールできます）

HTML・CSS・JavaScript

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <style>
      .sampletopscrollbox {
        background-color: rgb(215, 215, 215);
        width:70vw;
        height:60vh;
        margin: 16px auto;
        overflow-y:scroll;
        scroll-behavior: smooth;
      }
      .sampletopscrollarea {
        height:1600px;
      }
      .samplegazou {
        width:30%;
        height:30vh;
        margin: 20px auto;
        position: relative;
      }
      .samplegazou p {
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
      }
      .samplehidaritop {
        display: inline-block;
        width:20px;
        height:20px;
        border-right:solid thin darkred;
        transform: rotate(45deg);
      }
      .samplemigitop {
        display: inline-block;
        width:20px;
        height:20px;
        border-left:solid thin darkred;
        transform: rotate(-45deg) translate(1.5px,1.5px);
      }
      .sampletopbutton {
        background-color:rgb(247, 211, 246);
        width:50px;
        height:35px;
        border-radius:50%;
        cursor: pointer;
        transition: all .6s;
      }
      .samplehidetop {
        opacity: 0;
        visibility: hidden;
        transition: all .6s;
      }
      .chousei {
        width: 70vw;
        margin: 0 auto;
        display: flex;
        justify-content: flex-end;
        position: relative;
        bottom: 80px;
        right: 40px;
      }
    </style>
  </head>
  <body>
    <div id="sampletopscrollbox" class="sampletopscrollbox">
     <div class="sampletopscrollarea">
       <div class="samplegazou" style="background-color:pink">
         <p>画像１</p>
       </div>
       <hr>
       <div class="samplegazou" style="background-color:lightyellow">
         <p>画像２</p>
       </div>
       <hr>
       <div class="samplegazou" style="background-color:lightblue">
         <p>画像３</p>
       </div>
       <hr>
       <div class="samplegazou" style="background-color:lightgreen">
         <p>画像４</p>
       </div>
       <hr>
       <div class="samplegazou" style="background-color:white">
         <p>画像５</p>
       </div>
       <hr>
       <div class="samplegazou" style="background-color:tomato">
         <p>画像６</p>
       </div>
     </div>
    </div>
    <div class="chousei">
      <div id="sampletopbutton" class="sampletopbutton samplehidetop">
       <span class="samplehidaritop"></span>
       <span class="samplemigitop"></span>
     </div>
    </div>

    <script type="text/javascript">
    { const eventTarget = document.getElementById('sampletopscrollbox');
      const sampleScrollButton = document.getElementById('sampletopbutton');
      eventTarget.addEventListener('scroll',function() {
        let positionTop = 0;
        positionTop = eventTarget.scrollTop;
        if (positionTop > 250) {
          sampleScrollButton.classList.remove('samplehidetop');
        }
        else {
          sampleScrollButton.classList.add('samplehidetop');
        }
        });
      sampleScrollButton.addEventListener('click',function() {
        eventTarget.scrollTop = 0;
      });
    }
    </script>
  </body>
</html>

« 前の記事へ次の記事へ »