[jQuery] トップへ戻るボタンの実装サンプル

2019-07-232019-12-07JavaScriptjQuery

画面右下によくある「 Page Top 」とか「ページトップへ戻る」ボタンの jQuery を使ったコードサンプル。
スクロールしたらボタンが表示されるバージョン。ボタンに FontAwsome を使ったりデザインによって CSS が変わるが、 jQuery で作成する動きの部分は共通して使える。

Contents

1. 基本的なコード
2. 「トップへ戻る」ボタンのデザインサンプル

基本的なコード

「 TOP 」とだけ書かれたボタンのサンプルコード。四角形に文字列を表示しているだけなので、CSS もシンプル。

デモ

See the Pen Top Page Button Demo by AgoPeanuts (@AgoPeanuts) on CodePen.

HTML

jQuery ライブラリを読み込む。
head タグ内に下記コードを書く。このコードは CDN からロードさせている。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

「 TOP 」ボタンを追加する。

<div id="page_top"><a href="#">TOP</a></div>

body 終了タグの手前とか、下の方に書いておく。
CSS で、 position: fixed; で位置を固定するので、どこに書いてもいいと思う。
PHP でインクルードしまくって、表示部分が複雑になってるときは、HTML コードの上の方に書いたりしている。

jQuery

$(function(){
  var pagetop = $('#page_top');
  // ボタン非表示
  pagetop.hide();
  // 100px スクロールしたらボタン表示
  $(window).scroll(function () {
     if ($(this).scrollTop() > 100) {
          pagetop.fadeIn();
     } else {
          pagetop.fadeOut();
     }
  });
  pagetop.click(function () {
     $('body, html').animate({ scrollTop: 0 }, 500);
     return false;
  });
});

ボタン非表示をここ（ jQuery ）に書いているが、 CSS で display: none; としてもいい。
animate() の 500 はスクロールするときの時間間隔を指定していて、これだと 0.5 秒かけてスクロールする。よって、数値が小さいほど速くなる。

CSS

#page_top {
    position: fixed;
    bottom: 30px;
    right: 20px;
}
#page_top a {
    background-color: #999;
    color: #fff;
    text-align: center;
    text-decoration: none;
    padding: 20px 20px;
}
#page_top a:hover {
    background-color: #666;
    text-decoration: none;
}

ボタンの角を丸角にしたければ border-radius を使い、矢印とかのアイコンを使いたい場合は FontAwsome とかを導入する。

「トップへ戻る」ボタンのデザインサンプル

Font Awesome を使う場合は、CDN を使って HTML の head タグ内で読み込む

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

See the Pen page top button sample design by AgoPeanuts (@AgoPeanuts) on CodePen.

Posted by Agopeanuts