<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
</head>

<div class="wrapper">

<header class="header" id="top">
  <p>ヘッダー</p>
</header>

<div class="contents">
  <p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
  <p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
  <p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
  <p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
  <p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
  <p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
  </div>

<a href="#top" class="topBtn" id="topBtn">TOP</a>

<footer class="footer">
  <p>フッター</p>
</footer>

</div>
.topBtn {
  position:fixed;
  bottom:20px;
  right:0;
  display:block;
  background-color:rgba(0,0,0,0.5);
  color:#fff;
  text-decoration:none;
  font-size:11px;
  width:60px;
  height:60px;
  text-align:center;
  line-height:60px;
  box-sizing:border-box;
}

.wrapper {
  position:relative; /*topBtnの親要素に指定*/
}
body {
  color:#333;
  font-size:14px;
  line-height:1.8em;
  letter-spacing:0.05em;
}
.header {
  height:40px;
  line-height:40px;
  text-align:center;
  background-color:#ccc;
}
.contents {
  margin:40px 40px 60px 40px;
}
.footer {
  height:100px;
  line-height:100px;
  text-align:center;
  background-color:#333;
  color:#fff;
}
$(document).ready(function(){
    $("#topBtn").hide();
    $(window).on("scroll", function() {
        if ($(this).scrollTop() > 100) {
            $("#topBtn").fadeIn("fast");
        } else {
            $("#topBtn").fadeOut("fast");
        }
        scrollHeight = $(document).height();
        scrollPosition = $(window).height() + $(window).scrollTop();
        footHeight = $("footer").innerHeight(); //footerの高さ(=止めたい位置)
        if ( scrollHeight - scrollPosition  <= footHeight ) {
            $("#topBtn").css({
                "position":"absolute", 
                "bottom": footHeight + 20
            });
        } else { 
            $("#topBtn").css({
                "position":"fixed",
                "bottom": "20px" 
            });
        }
    });
    $('#topBtn').click(function () {
        $('body,html').animate({
        scrollTop: 0
        }, 400);
        return false;
    });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.