【jQuery】下方へスクロールしたらトップへ戻るボタンを表示して、スムーズにページトップへ帰るスクリプトを組んでみた

2012/09/20 2018/10/06

正式名称はよくわかりませんが、下スクロールで戻るボタンをふわっと表示させ、クリックするとページの上部へスルスルっとスクルールし、再びふわっと消えるというスクリプトです。
以前にこなした内容の復習ってことで戻るボタンもテキストではなく画像にし、ファイル名末尾に「_on」をつけた画像で差し替えも行なってみました。

ちょっとした事を数行で実装できるjQueryって改めて凄い＆面白いなぁ。

イメージ / サンプル

（よくわからない）イメージ

デモ

スクリプト

HTML

ボタン画像を先頭へ記述。
jQueryを使って、座標 0 に戻るスクリプトなので、リンク（aタグ）ではなく、pタグをクリック対象とし、<a name="top"> というのもやめてみました。
不具合は多分、無いはずです。

<p id="backToTop"><img src="../js/jquery.tgSmoothScroll/img/go_top_button.png" alt="goTop"></p>

1	<p id="backToTop"><img src="../js/jquery.tgSmoothScroll/img/go_top_button.png" alt="goTop"></p>

CSS

領域を画像サイズと同じ、横：50px、縦：50px、表示位置をそれぞれ底から 10px、右から 20px にしています。
今回のスクリプトに関するCSSはこれだけです。

#backToTop{
    position: fixed;
    bottom: 10px;
    right: 20px;
    width: 50px;
    height: 50px;
}

#backToTop{

position: fixed;

bottom: 10px;

right: 20px;

width: 50px;

height: 50px;

}

JS

ではjavascript部分。

$(function(){
  $('#backToTop').hide();                     // デフォルトで非表示とする

  $(window).scroll(function(){
    if ($(this).scrollTop() > 100) {          // ←【1】scrollTop() で現在のスクロール上の上位置を取得
      $('#backToTop').fadeIn();               // 100を過ぎていたら、#backToTop（戻るボタン）をフェードインさせる
    } else {
      $('#backToTop').fadeOut();              // それ以外は、フェードアウト
    }
  });

  // クリック時にスムーズにページ上部へスクロールさせる
  $('#backToTop').click(function(){
    $('body,html').animate({ scrollTop: 0 }, 350);  // ←【2】
    return false;  // ←【3】
  });

  // 画像切り替え
  $('#backToTop img').hover(
    function(){
      $(this).attr('src', $(this).attr('src').replace('.png', '_on.png'));  // マウスオーバーで、_on画像に差し替え
    },
    function(){
      $(this).attr('src', $(this).attr('src').replace('_on.png', '.png'));  // マウスアウトで、OFF用画像に差し替え
    }
  );

});

$(function(){

$('#backToTop').hide(); // デフォルトで非表示とする

$(window).scroll(function(){

if ($(this).scrollTop() > 100) { // ←【1】scrollTop() で現在のスクロール上の上位置を取得

$('#backToTop').fadeIn(); // 100を過ぎていたら、#backToTop（戻るボタン）をフェードインさせる

} else {

$('#backToTop').fadeOut(); // それ以外は、フェードアウト

}

});

// クリック時にスムーズにページ上部へスクロールさせる

$('#backToTop').click(function(){

$('body,html').animate({ scrollTop: 0 }, 350); // ←【2】

return false; // ←【3】

});

// 画像切り替え

$('#backToTop img').hover(

function(){

$(this).attr('src', $(this).attr('src').replace('.png', '_on.png')); // マウスオーバーで、_on画像に差し替え

function(){

$(this).attr('src', $(this).attr('src').replace('_on.png', '.png')); // マウスアウトで、OFF用画像に差し替え

}

);

});

大体、行なっている処理はわかると思いますが、各行にコメントを付けてみました。
そう大したことはしていませんが、動けばいいのですよ！と自分を納得させて書いてみました（苦笑

【1】の scrollTop() > 100 で、今回はブラウザ上から100ピクセル数以上になった場合に出現させています。
この数値で出現位置を調整可能です。

【2】の 350 は、スクロールスピードとなります。
もう少しゆっくりスクロールさせたい場合は、500など、大きい数値にすれば可能。

【3】の return false; は a 要素に clickイベントを設定する際に必要な記述になります。
今回のような、ページ内を移動させるがためのスクリプトの場合は目立ちませんが、例えば <a> タグをクリックした時に文字色を変更するなど、移動以外の動作をさせたい場合にリンク先へ移動してしまうのを防ぐための記述となります。

特にどうってことはないスクリプトなので、今回はプラグインにはしませんでしたが、コメント頂ければプラグインも作ってみたいと思います。