jQuery - 先頭に戻るためのボタンの表示

公開日：2018-12-28 更新日：2019-05-14
[jQuery]

1. 概要

スクロールした際に、先頭(トップ)に戻るための、ボタンを右下に表示します。

ボタンを右下に表示するには、css を以下のようにします。
position:fixed; right:20px; bottom:20px;

スクロールした際のボタンの表示は、スクロールイベントで現在のスクロールしている位置を取得して、
その位置によって、要素の表示を切り替えます。
$(window).on("scroll", function(e) {
	if ($(this).scrollTop() > 50) {
		要素を表示する;
	} else {
		要素を隠す;
	}
});

2.1 サンプル

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <style>
    #link {
      position:fixed; right:20px; bottom:20px;
      width:40px; height:40px; background-color:yellow;
      display:none;
    }
  </style>
  
  <div style="height:1000px; border:5px red solid;"></div>
  <div id="link"></div>

  <script>

    $(window).on("scroll", function(e) {
      if ($(this).scrollTop() > 50) {
        $("#link").css("display", "block");
      } else {
        $("#link").css("display", "none");
      }
    });

    $("#link").on("click", function(e) {
      $(window).scrollTop(0);
    });

  </script>
</body></html>

右側の赤線があるエリアのスクロールバーを移動すると、ログ出力されます。
実行結果：画面


2.2 サンプル アニメーション付き

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <style>
    #link {
      position:fixed; right:20px; bottom:20px;
      width:40px; height:40px; background-color:yellow;
      display:none;
    }
  </style>
  
  <div style="height:1000px; border:5px red solid;"></div>
  <div id="link"></div>

  <script>

    $(window).on("scroll", function(e) {
      if ($(this).scrollTop() > 50) {
        $("#link").fadeIn();
      } else {
        $("#link").fadeOut();
      }
    });

    $("#link").on("click", function(e) {
      $('body, html').animate({
        scrollTop:0
      }, 500);
    });

  </script>
</body></html>

右側の赤線があるエリアのスクロールバーを移動すると、ログ出力されます。
実行結果：画面



Tag

New Article