HTML,CSS,JavaScriptで作るTOPに戻るボタンの作り方【Web制作】

2024年10月7日2024年10月10日

Web制作でLPなどの制作について勉強していると、１ページが長いこともあるため、TOPに戻るボタンを実装する機会がよくあると思います。

今回は、HTML,CSS,JavaScriptを使ってTOPへ戻るボタンを作る方法について解説します。

HTMLコード

     <a href="#" class="page-top" id="js-page-top">
        <img src="./img/pagetop-img.png" alt="">
     </a>

HTMLのコードはすごく簡単です。<body>タグの一番下に上記のようなコードを書きます。「href属性」に「#」を設定することでクリックした時にページの一番上にとぶようになります。

「class」にはCSSで利用するクラス名を、「id」にはJavaScriptiで使用するID名をつけてください。

<img>タグの「src」属性には、実際にトップに戻るボタンで使用する画像のパスを設定してください。

CSSコード

.page-top {
  position: fixed;
  right: 10px;
  bottom: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;

  &.is-show {
    opacity: 1;
    visibility: visible;
  }
}

今回は、Sassを利用して記述しています。

YUYABLOG

Sassをコンパイルする方法【環境構築】 | 私が当ブログでWeb制作について解説する時にはSassのコードを記載しています。しかし、このSassは初期設定の状態では書いても反映されません。この記事では、人気のエディ…

YUYABLOG

Sassの基礎-ネスト構造と変数について解説！【Sass,CSS】 | Sass（Syntactically Awesome Style Sheet）は、CSSをより効率的に書くための拡張言語です。この記事では人気のエディターであるVSCodeを使って、Sassの基礎としてネスト…

Sassの環境構築やメリットについては上記の記事で解説していますので、気になる方は読んでみてください。

表示させる位置の指定

  position: fixed;
  right: 10px;
  bottom: 10px;

この部分で画面のどこにボタンを設置するかを決めています。

今回であれば「right:10px」「buttom:10px」ですので、画面の右から10px、下から10pxの位置にボタンを設置させています。

最初は見えないように設定する

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;

この部分では初期状態ではトップへ戻るボタンが画面に表示されないように設定しています。

「opacity:0」で要素を完全に透明にし、「visibility:hidden;」でクリックをしても反応しないように設定しています。

「transition」に関しては、後ほどJavaScriptで画面上部からどれくらいスクロールしたらボタンを表示させるという設定をするのですが、そのときに0.3秒かけてボタンが表示されるように設定しています。

  &.is-show {
    opacity: 1;
    visibility: visible;
  }

この.is-showクラスというクラスが与えられているときには

「opacity:1」で不透明にして実際に確認できる状態にし、「visibility:visible」でボタンをクリックしたときに反応するように設定しています。

これからJavaScriptでこの「is-show」クラスをつけ外しする方法について解説します。

JavaScriptコード

jQuery(window).on("scroll", function (e) {
    if(100 < jQuery(window).scrollTop()) {
        jQuery("#js-page-top").addClass("is-show");
    }else {
        jQuery("#js-page-top").removeClass("is-show");
    }
});