<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<p>A</p>
<p>B</p>
<p>C</p>
<p>D</p>
<p>E</p>
<p>F</p>
<p>G</p>
<p>H</p>
<p>I</p>
<p>J</p>
<p>K</p>
<p>L</p>
<p>M</p>
<p>N</p>
<p>O</p>
<p>P</p>
<p>Q</p>
<p>R</p>
<p>S</p>
<p>T</p>
<p>U</p>
<p>V</p>
<p>W</p>
<p>X</p>
<p>Y</p>
<p>Z</p>

<div id="pagetop"><a href="#">Page Top</a></div>
*{
	margin:0;
	padding:0;	
}
p{
	text-align:center;
	padding:30px;	
}
#pagetop{
	position:fixed;
	bottom:50px;
	right:-100px; /* ページトップボタンの幅 */	
}
#pagetop a{
	display:block;
	background:#333;
	color:#fff;
	width:100px;
	padding:5px 0;
	text-align:center;
	text-decoration:none;
}
$(function() {
  var appear = false;
  var pagetop = $('#pagetop');
  $(window).scroll(function () {
    if ($(this).scrollTop() > 100) {  //100pxスクロールしたら
      if (appear == false) {
        appear = true;
        pagetop.stop().animate({
          'right': '0px' //ページトップボタンの幅
        }, 300); //ページトップボタンが現れる
      }
    } else {
      if (appear) {
        appear = false;
        pagetop.stop().animate({
          'right': '-100px' //ページトップボタンの幅
        }, 300); //ページトップボタンが隠れる
      }
    }
  });
  pagetop.click(function () {
    $('body, html').animate({ scrollTop: 0 }, 500); //トップへ戻る
    return false;
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.