【クリックでページトップへ】スクロールトップボタンの作り方【jQuery】

サイトをスクロールしていると、
途中で下のあたりからふわっと現れるボタンってありますよね。

押すとページのトップまで、ぐいーんと戻ってくれるボタンです。
今回はjQueryを使ってスクロールトップボタンを作ってみたいと思います。

こんなかんじのデモを作ってみました。
スクロールすると、右下から白い矢印ボタンが現れて、押すとページトップまで戻ります。

See the Pen
rNVEWzV by notebook (@orange-notebook)
on CodePen.

まず、スクロールトップの機能を作るために必要なことを整理したいと思います。

HTML

HTMLでは単純にボタン要素を作ります。

<div class="scroll-top">
  <a href="#">↑</a>
</div>

CSS

CSSでは、ボタンの固定位置を決めていきます。

position: fixed; と top, right, bottom, leftを組み合わせて、
画面のどの部分に固定するかを指定します。

デモでは、右下からそれぞれ30pxずつのところに配置しました。

.scroll-top {
  // ボタンを右下で固定位置にする
  position: fixed;
  bottom: 30px;
  right: 30px;
  
  width: 35px;
  height: 35px;
  background: white;
  border-radius: 50%;
  cursor: pointer;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

.scroll-top a {
  text-decoration: none;
  color: black;
}

また今回矢印は簡易な記号で作っていますが、
fontawesomeなどのアイコンフォントが使われている場合がおそらく多いですよね。

jQuery

冒頭で定義したスクロールトップ機能に必要なことを実装したいと思います。

1：初期状態ではボタンを非表示にする

$("ボタンを指定").hide();

デモではボタンのクラス名をscroll-topとしているので、
$(“.scroll-top”).hide();となっています。

2：ある程度スクロールしたらボタンを表示させる

$(window).scroll(function() {
    if($(this).scrollTop() > スクロールするピクセル数) {
        $("ボタンを指定").fadeIn();
    } else {
        $("ボタンを指定").fadeOut();
    }
});

今回は100pxスクロールすると、ボタンが表示されるようにしました。

書き方は「if($(this).scrollTop() > 100」 と、単位の「px」は必要ではありません。

また「100px以上スクロールしたら」なので、一度100px以上スクロールしたあとでも
再び100px未満のスクロール状態になったら、再度ボタンは非表示になります。

3：ボタンをクリックしたらサイトの上まで戻る

$("ボタンを指定").click(function() {
    $("html, body").animate({
        scrollTop: 0}, ページトップに戻る秒数);
    return false;
});

デモではボタンを押したら0.5秒でページトップまで戻る設定にしています。

以上、スクロールトップボタンの作り方でした。
最後までお読みいただき、ありがとうございました。

【jQuery】モーダルウィンドウの作り方今回はjQuerを使ったモーダルウィンドウの作り方をまとめてみたいと思います。...

【jQuery】アコーディオンメニューの作り方サイトのQ & Aセクションなどをみていると、質問部分のクリックで、回答の表示・非表示が切り替わるメニューがありますよね。 今回はjQueryを使ったアコーディオンメニューの作りかたをまとめてみたいと思います。...