裏紙に書く程度の内容

画面の下までスクロールしたら上に戻るボタンを表示する

こちら( http://www.webopixel.net/javascript/538.html ) の記事を参考に、ある程度スクロールしたら “TOPへ戻る”ボタンを表示するボタンを作ったのですが、”ある程度スクロールしたら”じゃなくて”一番下までスクロールしたら”ボタンを表示する方法です。

一番下までスクロールしたことを検知する

$(window).scroll(function() {
  if ($(document).height()
    $(this).height() + $(this).scrollTop()) {
      console.log("bottom");
    }
});

このコードで、ウィンドウを一番下までスクロールするとログに”bottom”と表示されます。

簡単に説明すると、

$(document).height()はページの高さです。

scrollTop()でスクロール位置を取得するのですが、返されるのは関数名のとおりトップの位置です。 したがって、scrollTop()にウィンドウの高さを加算すればスクロールの下端が取得できます。

これがページの高さと一致したら、下までスクロールしたということになります。

トップに戻るボタンの実装

js

var topButton;
topButton = $('#page-top');
topButton.hide();

$(window).scroll(function() {
  if ($(document).height() 

  $(this).height() + $(this).scrollTop()) {
    topButton.fadeIn();
  } else {
    topButton.fadeOut();
  }
});

余裕を持たせる

上記のコードだと完全に一番下までスクロールしないとボタン表示されません。

これに多少の余裕を持たせてみます。イメージ的には”ページの下端に近づいたら”って条件になります。

if文の条件の修正のみです。

if ($(document).height() 

  $(this).height() + $(this).scrollTop()) {
    if ( ($(document).height() - ($(this).height() + $(this).scrollTop()) ) < 200) {

何やら括弧が多くなっちゃいましたが、

ページの高さ - (画面高さ + スクロールTop位置) < 200

って条件になっています。 つまり、下端から200px以下の位置まで表示されたらという条件になります。

200ってのは任意のサイズにしてください。

クリック時のイベント

topへ戻るボタンのクリック時はスライド(?)して戻るようにしておきます。

$("#page-top").on("click", function(e) {
  e.preventDefault();
  return $("html, body").animate({
    scrollTop: 0
  }, 500, "swing");
});

(htmlを <a href="#">Topへ</a>のようにしているので、e.preventDefault()で本来の動作を無視させています)

Index