<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:0;
}
#pagetop a{
	display:block;
	background:#333;
	color:#fff;
	width:100px;
	padding:5px 0;
	text-align:center;
	text-decoration:none;
}
$(function() {
    var pagetop = $('#pagetop');   
    pagetop.hide();
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {  
            pagetop.fadeIn();	//100pxスクロールしたらフェードイン
        } else {
            pagetop.fadeOut();	//100pxスクロールしたらフェードアウト
        }
    });
    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.