<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;
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.