jQuery の animate 関数を使ってページトップにスムーズスクロールするボタンを作ろう

phi phi on jQuery

今回は, jQuery の animate 関数を使ったサンプルを紹介します. ブログとかでよく作る機能で, かつ汎用性も高いので知ってて損はないと思います!

Runstant Demo

とりあえず, 今回作るデモです.

Top ボタンを押すとページトップにスムーズスクロールするのが わかるかと思います.

animate 関数とは?

jQuery には animate という簡単にアニメーション(値を変化)させることができる関数があります.
これを使うことで簡単にスムーズスクロールさせることができます.

animate に渡せる引数はこんな感じです.

animate(params, [duration], [easing], [callback])

  • params ... 変化させたい要素の プロパティ名:変化値 を持ったオブジェクト
  • duration ... アニメーションの動作時間です. "slow", "normal", "fast" もしくはミリ秒指定ができます.
  • easing ... イージング関数名を指定できます. デフォルトは "linear""swing" のみですが, プラグインで追加できます.
  • callback ... アニメーション完了時に実行する関数を指定できます.

Code

HTML

  <body>
    <h1>jQuery でページのトップへスムーズスクロールするボタンを作ろう</h1>

    <p class='pad'>Text</p>
    <p class='pad'>Text</p>
    <p class='pad'>Text</p>
    <p class='pad'>Text</p>
    <p class='pad'>Text</p>
    <p class='pad'>Text</p>
    <p class='pad'>Text</p>
    <p class='pad'>Text</p>

    <div class='btn-top'>Top</div>
  </body>

CSS

.pad {
  height: 100px;
  margin-bottom: 4rem;
  box-shadow: 0px 0px 4px 0px #aaa;
  background-color: white;
}

.btn-top {
  margin: 2rem auto;
  width: 64px;
  height: 64px;
  line-height: 64px;
  text-align: center;
  background-color: white;
  box-shadow: 0px 0px 4px 0px #aaa;
  border-radius: 50%;
  font-size: 2rem;

  cursor: pointer;
}

JavaScript

$(function() {
  $('.btn-top').click(function() {
    // スクロール
    $('html,body').animate({scrollTop: 0}, 500, 'swing');
  });
});

Flow

制作フロー

1. HTML にボタンとなる要素を作ろう

まず, HTML にボタン用の要素を作ります. 今回は btn-top というクラス名にしています.

<div class='btn-top'>Top</div>  

2. CSS でちょっとだけデザイン

見た目がボタンと分かるように簡単にスタイリングしています.

.btn-top {
  margin: 2rem auto;
  width: 64px;
  height: 64px;
  line-height: 64px;
  text-align: center;
  background-color: white;
  box-shadow: 0px 0px 4px 0px #aaa;
  border-radius: 50%;
  font-size: 2rem;

  cursor: pointer;
}

やっているのはこんな感じ

  • margin, width の指定で中央揃えに
  • width, height, border-radius でサークルに
  • line-height, text-align でテキストが真ん中にくるように

3. jQuery でスムーズスクロール

今回の本題です! まず, ボタン要素を取得してクリック時のイベント処理を登録します.

$('.btn-top').click(function() {
  ...
});

登録したイベント内でスムーズスクロールの処理を書きます. 上で紹介した animate 関数を使います.

$('html,body').animate({scrollTop: 0}, 500, 'swing');

html,body 要素に対して scrollTop の値を 0 に, 500ミリ秒かけて遷移します.

たったこれだけでページトップにスムーズスクロールしてくれます.