jQueryで作るスムーススクロール機能付きのページトップに戻るボタン

jQueryで作るスムーススクロール機能付きのページトップに戻るボタンの作り方を紹介します。

ページトップに戻るボタンはWebサイトにほぼ必須の機能とも言えるので、ぜひ実装してみてください。

スムーススクロール機能付きのページトップに戻るボタンのサンプルコード

スムーススクロール機能付きのページトップに戻るボタンのサンプルコード

HTML

<header class="header"></header>
<div class="main">
  <div class="mainvisual"></div>
  <div class="contents"></div>
  <div class="btn-top"><span></span></div>
</div>
<footer class="footer"></footer>

ヘッダーエリアの下にメインビジュアルがあり、その下にコンテンツ、一番下にフッターがあるイメージです。

CSS

.main {
  position: relative;
}
.btn-top {
  position: fixed;
  right: 30px;
  bottom: 30px;
  background: rgba(204,204,204,0.8);
  border-radius: 50%;
  width: 50px;
  height: 50px;
}
.btn-top span {
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  cursor: pointer;
}
.btn-top span::before {
  content: "";
  display: block;
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border-top: 4px solid #ffffff;
  border-left: 4px solid #ffffff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

疑似要素の.btn-top span::beforeで、ボタンの見た目を設定しています。
サイトに合わせてお好みで調整してください。

jQuery

$(document).ready(function() {
  $(".btn-top").hide(); // 初期位置ではボタンを非表示
  $(window).on("scroll", function() {
      // ある程度スクロールしたらボタンを表示
      if ($(this).scrollTop() > 100) {
          $(".btn-top").fadeIn("fast");
      } else {
          $(".btn-top").fadeOut("fast");
      }
      scrollHeight = $(document).height();
      scrollPosition = $(window).height() + $(window).scrollTop();
      footHeight = $(".footer").innerHeight();
      // フッターエリアまでスクロールしたらボタンを固定
      if ( scrollHeight - scrollPosition  <= footHeight ) {
          $(".btn-top").css({
              "position":"absolute",
          });
      } else {
          $(".btn-top").css({
              "position":"fixed",
              "bottom": "20px"
          });
      }
  });
  $('.btn-top').click(function () {
      $('body,html').animate({
        scrollTop: 0
      }, 800); // スクロール速度
      return false;
  });
});

初期位置にトップに戻るを表示する意味はないので、ある程度スクロールするまでは非表示にしておきます。

また、フッターエリアに到達したらボタン位置が追従から固定に変化します。そうすることで、ボタンがフッターに重ならないように配慮しています。