一定量スクロールすると表示されて、任意の場所で固定されるページトップを実装する方法です。

Contents

  1. 実装準備
  2. スクロールするとフェードインで表示
  3. スクロールすると下からスライドで表示
  4. スクロールしてフッター手間で固定させる

実装準備

まずはじめに、jQueryを使用するのでライブラリを読み込みます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js">

続いて、HTMLとCSSは以下のように記述します。

<p class="pagetop"><a href="#">Page Top</a></p>
.pagetop { 
	position: fixed; 
	right: 20px;
	bottom: 20px;
}

スクロールするとフェードインで表示

$(function() {
  var pagetop = $('.pagetop');
  pagetop.hide(); // 非表示にしておきます
  
  $(window).on('scroll', function () {
    if ($(this).scrollTop() > 100) {　// トップから100pxスクロールしたらフェードイン
      pagetop.fadeIn();
    } else {
      pagetop.fadeOut();　// スクロール量が100px未満の場合は非表示
    }
  });
  
  // クリックしたらトップへ戻る
  pagetop.click(function () {
    $('body, html').animate({ scrollTop: 0 }
	, 600);　
    return false;
  });
});

スクロールすると下からスライドで表示

一定量スクロールすると、下からぴょこんとアニメショーン付きで表示させる方法です。

.pagetop { 
	position: fixed; 
	right: 20px;
	bottom: -50px;
}
$(function() {
  var flag = false,
  	  pagetop = $('.pagetop');
  
  $(window).on('scroll', function () {
    if ($(this).scrollTop() > 100) { // トップから100pxスクロールしたらスライドイン
      if (flag == false) {
        flag = true;
        pagetop.stop().animate({
          bottom: "20px" // 下からスライドして２０pxのところで固定
        }, 600);
      }
    } else {
      if (flag) {
        flag = false;
        pagetop.stop().animate({
        bottom: "-50px"
        }, 600);
      }
    }
  });
  pagetop.click(function () {
    $('body, html').animate({ scrollTop: 0 }
	, 600);
    return false;
  });
});

スクロールしてフッター手間で固定させる

一定量スクロールしたら、ページトップを表示させて、ある要素の手間で固定させる方法です。

body {
	position: relative;
}
.pagetop {
	position: fixed;
	right: 20px;
	bottom: -50px;
}
$(function() {
  var flag = false,
 	    pagetop = $('.pagetop');
  
  $(window).on('scroll', function () {
    if ($(this).scrollTop() > 100) { // トップから100pxスクロールしたらスライドイン
      if (flag == false) {
        flag = true;
        pagetop.stop().animate({
          bottom: "20px" // 下からスライドして２０pxのところで固定
        }, 600);
      }
    } else {
      if (flag) {
        flag = false;
        pagetop.stop().animate({
          bottom: "-50px"
        }, 600);
      }
    }
	  // フッター手前で固定
    scrollH = $(document).height(),
    scrollPos = $(window).height() + $(window).scrollTop(),
    footerH = $(".footer").innerHeight();　

    if( scrollH - scrollPos <= footerH ) {
      pagetop.css({
        position: "absolute",
        bottom: footerH + 20,　// footerの高さ＋２０pxの位置で固定
      });
      
    } else {
      pagetop.css({
        position: "fixed",
        bottom: "20px"
      })
    }
 });

 pagetop.click(function () {
    $('body, html').animate({ scrollTop: 0 }, 600);
    return false;
  });
});