【JavaScript】ふわっと出て決まった高さで止まるスムーススクロールを実装

縦に長いwebページの場合、「トップへ戻るボタン」でページの上端まで一気に戻れると非常に便利です。

⑴一定の高さまでスクロールしたらボタンがフェードインする。

⑵任意の高さまで行ったらピタッとトップボタンを固定する

⑶ボタンを押したらスクロールしながらトップまで移動する

上記３つを兼ね備えたスムーススクロールの実装方法をご紹介していきます。

#HTMLにボタンを追加

「topBtn」ボタンというidをつけたaタグを準備します。

href属性には＃を設定し、ページの一番上に戻るようにします。
このaタグをcontentというidのついたdiv要素で囲みます。

今回はこのdiv要素より下に行かないように設定していきます。

html

<div id="content" class="top">
   <a href="#" id="top-button"><i class="fas fa-chevron-up"></i></a>
</div>

#CSSでボタンを装飾

下にスクロールしたら、#topBtnの「position：absolute」に変更して親要素の高さで
ボタンを固定するため、#contentに「poistion：relative」を指定します。

その他、わかりやすくするためにトップボタンを装飾していきます。装飾の部分はお好みで設定してください。

css

#top-button {
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #313131;
  color: white;
  z-index: 100;
}

トップボタンの矢印につきましてはFont Awesomeより使用してます。

#JavaScriptで動きを実装

最後にJavaScriptを記述していきます。解説はコード内に記載しました。
コード前半はボタン表示・非表示、ポジションの変更、後半のコードはスムーススクロール実装のコードになっています。

javascript

  $(document).ready(function () {
    $("#top-button").hide();　//ボタンを非表示にする
    $(window).on("scroll", function () {
      if ($(this).scrollTop() > 50) { //ページの上から50pxスクロールした時
        $("#top-button").fadeIn("fast"); //ボタンがフェードインする
      } else {
        $("#top-button").fadeOut("fast"); //ボタンがフェードアウトする
      }
      scrollHeight = $(document).height(); //ドキュメントの高さ
      scrollPosition = $(window).height() + $(window).scrollTop(); //現在地
      footHeight = $("footer").offset().top; //止めたい位置の高さ(今回はfooter)
      if (scrollPosition > footHeight) { //現在地がfooterの高さ以下の時
        $("#top-button").css({
          position: "absolute", //pisitionをabsoluteに変更
        });
      } else { //それ以外の場合は
        $("#top-button").css({
          position: "fixed", //固定表示
        });
      }
    });

    $("##top-button").click(function () {
      $("body,html").animate(
        {
          scrollTop: 0,
        },
        800 //スムーススクロールの速度
      );
      return false;
    });
  });

(window).height()･･･ウィンドウの高さ
(window).scrollTop()･･･スクロール位置
.offset().top･･･表示位置

#まとめ

トップボタンを実装する際にはフッターにかぶって視認性が悪くなったり、ボタンが情報を隠してしまう場合もあるので、
その場合は今回のようにボタンはある一定の高さから下にはいかないようにするといった処理を行うことで、
サイトの使いやすさに繋がってくるのではないかなと思います。