スクロールすると途中で表示される「トップへ戻るボタン」の実装。さらにフッター手前で止める場合の実装。

2019/02/18 2021/04/09

スクロールすると途中で表示される「トップへ戻るボタン」の実装

See the Pen scroll-to-top_standard by RECOOORD (@recooord) on CodePen.

上記デモを下へスクロールしてください。
「 トップへ戻るボタン 」が途中で表示され、クリックするとページトップに戻ります。
今回はこちらの実装方法を紹介していきます。

HTMLの記述

<section>SCROLL DOWN</section>
<p class="button">㊤</p>

「 section 」タグはページのコンテンツ部分で、次の「 .button 」が今回実装する「 トップへ戻るボタン 」です。

CSSの記述

section{
  height: 1000px;
  font-size: 50px;
  font-weight: bold;
  text-align: center;
  padding: 100px 50px;
}

.button{
  position: fixed;
  right: 0;
  bottom: 0;
  font-size: 50px;
  color: #fff;
  background: #000;
  padding: 10px;
  cursor: pointer;
  transition: .3s;
  
  /*デフォルトで非表示にする*/
  opacity: 0;
  visibility: hidden;
}

/*このクラスが付与されると表示する*/
.active{
  opacity: 1;
  visibility: visible;
}

「 section 」ではスクロール領域を高さで確保しています。
トップへ戻るボタンの「 .button 」クラスには、「 position: fixed; 」でウィンドウの右下へ絶対配置しています。
「 .button 」は途中で表示されるようにしますので、デフォルトでは非表示にしておきます。

jQueryの記述

$(function() {
  // 変数にクラスを入れる
  var btn = $('.button');
  
  //スクロールしてページトップから100に達したらボタンを表示
  $(window).on('load scroll', function(){
    if($(this).scrollTop() > 100) {
      btn.addClass('active');
    }else{
      btn.removeClass('active');
    }
  });

  //スクロールしてトップへ戻る
  btn.on('click',function () {
    $('body,html').animate({
      scrollTop: 0
    });
  });
});

スクロール量がページトップから100pxの位置に達したら「active」クラスが付与されるようにしてます。
「active」クラスが付与されると、ボタンが表示されるようになります。

続いて「 トップへ戻るボタン 」をクリックするとウィンドウ上部へ戻る実装をしています。

「トップへ戻るボタン」をフッター手前で止める場合

See the Pen scroll-to-top_footer-stop by RECOOORD (@recooord) on CodePen.

上記デモと下へスクロールしてください。
「 トップへ戻るボタン 」が途中で表示され、フッターまでスクロールするとフッターに被らないように手前でストップします。

HTMLの記述

<section>SCROLL DOWN</section>
<footer>
  <p class="button">㊤</p>
</footer>

「 footer 」タグの中に、トップへ戻るボタンの「 .button 」を記述します。

CSSの記述

section{
  height: 1000px;
  font-size: 50px;
  font-weight: bold;
  text-align: center;
  padding: 100px 50px;
}

.button{
  position: fixed;
  right: 0;
  bottom: 0;
  font-size: 50px;
  color: #fff;
  background: #000;
  padding: 10px;
  cursor: pointer;
  transition: .3s;
  
  /*デフォルトで非表示にする*/
  opacity: 0;
  visibility: hidden;
}

/*このクラスが付与されると表示する*/
.active{
  opacity: 1;
  visibility: visible;
}

/*フッターのスタイルを追加*/
footer{
  position: relative;
  height: 300px;
  background: #ccc;
}

/*このクラスが付与されると表示する*/
.absolute{
  position: absolute;
  top: -70px;
  bottom: auto;
}

先ほど書いたコードに「 footer 」と「.absolute」のスタイルを追加します。

jQueryの記述

$(function() {
  // 変数にクラスを入れる
  var btn = $('.button');
  
  //スクロールしてページトップから100に達したらボタンを表示
  $(window).on('load scroll', function(){
    if($(this).scrollTop() > 100) {
      btn.addClass('active');
    }else{
      btn.removeClass('active');
    }
  });
  
  //フッターの手前でボタンを止める
  $(window).on('load scroll', function(){
    var height = $(document).height(), //ドキュメントの高さ 
        position = window.innerHeight + $(window).scrollTop(), //ページトップから現在地までの高さ
        footer = $('footer').height(); //フッターの高さ
    if ( height - position  < footer ){ 
      btn.addClass('absolute');
    } else { 
      btn.removeClass('absolute');
    }
  });

  //スクロールしてトップへ戻る
  btn.on('click',function () {
    $('body,html').animate({
      scrollTop: 0
    });
  });
});

「 フッターの手前でボタンを止める 」とコメントがある箇所を追加してください。
これを記述することでフッターまでスクロールしたら「.absolute」というクラスが付与されて、フッター手前でボタンを止めることができます。

上記記述にJavaScriptで「window.innerHeight」で高さを取得している箇所があります。
jQueryの「$(window).height()」でも高さを取得することはできますが、スマホの場合、アドレスバーの高さが含まれて正確な高さが取得できないことがあります。
「window.innerHeight」を使うことで正確なウィンドウの高さを取得できるところがポイントになります。

以上、トップへ戻るボタンの実装でした。
Web制作では頻繁に使いますので、参考にしてみてください。