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

実装準備

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

html

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

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

PHP

<p class="pagetop"><a href="#">Page Top</a></p>

CSS

.pagetop { 
	position: fixed; 
	right: 20px;
	bottom: 20px;
}

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

jQuery

$(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;
  });
});

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

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

CSS

.pagetop { 
	position: fixed; 
	right: 20px;
	bottom: -50px;
}

jQuery

$(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" // 下からスライドして20pxのところで固定
        }, 600);
      }
    } else {
      if (flag) {
        flag = false;
        pagetop.stop().animate({
        bottom: "-50px"
        }, 600);
      }
    }
  });
  pagetop.click(function () {
    $('body, html').animate({ scrollTop: 0 }
	, 600);
    return false;
  });
});

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

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

CSS

body {
	position: relative;
}
.pagetop {
	position: fixed;
	right: 20px;
	bottom: -50px;
}

jQuery

$(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" // 下からスライドして20pxのところで固定
        }, 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の高さ+20pxの位置で固定
      });
      
    } else {
      pagetop.css({
        position: "fixed",
        bottom: "20px"
      })
    }
 });

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