スクロールするとページトップのボタンが現れる

一定量スクロールしたらページトップへ戻るボタンが出現するというアニメーションをjQueryを使用して実装する方法を紹介します。フェードインとフェードアウトを使った簡単なアニメーションで実装することができます。

アニメーションの実装方法

以下のようなスクリプトでページトップへ戻るボタンがふわっと現れる動きを実装します。

$(function() {
  var pagetop = $('#toTop');
  $(window).scroll(function () {
    if ($(this).scrollTop() > 1000) {
      pagetop.fadeIn();
     }else {
      pagetop.fadeOut();
    }
  });
});

まずは、「pagetop」という変数を定義して「#toTop」を代入します。そして、scroll()イベントを使ってページをスクロールさせたときの処理を実行します。処理内容は、トップからの距離が「1000」を超えたら「#toTop」を表示させ、そうでなければ非表示にするといった処理になります。fadeIn()イベントとfadeOut()イベントでふわっと表示されたり消えたりします。

今度は、CSS側でボタンを表示させるための設定をしていきます。

#toTop {
  display: none;
  position: fixed;
  right: 20px;
  bottom: 150px;
  cursor: pointer;
}

スクロールする前は、ボタンを表示させたくないので「display: none;」で非表示にしておきます。あとは、position関連のプロパティを使って表示位置を指定するだけです。

これで、ページトップへ戻るボタンを出現させることができます。あとは、ボタンをクリックしたときにページの先頭へ戻る動きを作ります。せっかくなので、スルルっとスムーズに戻るアニメーションにしてみます。先程のscroll()イベントにanimate()イベントを追加したものが以下となります。

$(function() {
  var pagetop = $('#toTop');
  $(window).scroll(function () {
    if ($(this).scrollTop() > 1000) {
      pagetop.fadeIn();
     }else {
      pagetop.fadeOut();
    }
  });
  pagetop.click(function () {
    $('body, html').animate({ scrollTop: 0 }, 500);
    return false;
  });
});

処理内容としては、「#toTop」の要素をクリックしたら、「body, html」要素に対してアニメーションさせるといった内容になります。

以上が、jQueryを使ってスクロールするとページトップのボタンを出現させる方法となります。

その他の記事
URLや英数字の長文を途中で改行させる方法
【CSS入門】ボックス構造について
動画を背景に使用する方法
【WordPress】カスタム投稿タイプの作り方
マウスオーバーで画像を半透明にする方法

TOP