Javascript

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

Javascript

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


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

HTMLの書き方

<section>SCROLL DOWN</section>
<p class="to-top">㊤</p>

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

CSSの書き方

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

.to-top{
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  right: 0;
  bottom: 0;
  font-size: 50px;
  font-weight: bold;
  color: #fff;
  background: #000;
  cursor: pointer;
}

section 」ではスクロール領域を高さで確保しています。
トップへ戻るボタンの「 .to-top 」には、「 position: fixed; 」でウィンドウの右下へ絶対配置しています。

jQueryの書き方

$(function() {
    var topBtn = $('.to-top');
    //ボタンを非表示にする
    topBtn.hide();
    //スクロールしてページトップから100に達したらボタンを表示
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
       //フェードインで表示
            topBtn.fadeIn();
        } else {
       //フェードアウトで非表示
            topBtn.fadeOut();
        }
    });
    //スクロールしてトップへ戻る
    topBtn.click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
});

一定量スクロールしたら「 トップへ戻るボタン 」を表示する。
トップへ戻るボタン 」をクリックするとウィンドウ上部へ戻る。
という実装をしています。

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


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

HTMLの書き方

<section>SCROLL DOWN</section>
<footer>
  <p class="to-top">㊤</p>
</footer>

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

CSSの書き方

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

footer{
  position: relative;
  height: 300px;
  background: #ccc;
}

.to-top{
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  right: 0;
  bottom: 0;
  font-size: 50px;
  font-weight: bold;
  color: #fff;
  background: #000;
  cursor: pointer;
}

先に紹介したコードとほぼ同じで、「 footer 」タグの記述が追加されたくらいです。

jQueryの書き方

$(function() {
    var topBtn = $('.to-top');
    //ボタンを非表示にする
    topBtn.hide();
    //スクロールしてページトップから100に達したらボタンを表示
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
       //フェードインで表示
            topBtn.fadeIn();
        } else {
       //フェードアウトで非表示
            topBtn.fadeOut();
        }
    });
    //フッター手前でボタンを止める(ここを追加する)
    $(window).scroll(function () {
        var height = $(document).height(); //ドキュメントの高さ 
        var position = $(window).height() + $(window).scrollTop(); //ページトップから現在地までの高さ
        var footer = $("footer").height(); //フッターの高さ
        if ( height - position  < footer ) { 
            topBtn.css({
              position : "absolute",
              top : -100
            });
        } else { 
            topBtn.css({
              position : "fixed",
              top: "auto"
            });
        }
    });
    //スクロールしてトップへ戻る
    topBtn.click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
});

フッター手前でボタンを止める 」とコメントがある箇所を追加します。
これだけでトップへ戻るボタンをフッター手前で止めることが出来ます。

あなたにおすすめの記事