html
<div id="pagetop"><a href="#up">▲</a></div>
CSS
※好きなように変更してください
#pagetop {
width: 100px;
height: auto;
float: left;
position: fixed;
bottom: 20px;
right: 20px;
}
#pagetop a {
width: 100%;
height: auto;
float: left;
background: #555555;
color: #FFFFFF;
padding: 30px;
text-align: center;
border-radius: 5px;
box-sizing: border-box;
}
#pagetop a:hover {
background: #999999;
}
JS
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
フェードイン・フェードアウト
<script>
$(function() {
var topBtn = $('#pagetop');
topBtn.hide();
//スクロールが100に達したらボタン表示
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
//スクロールしてトップ
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
</script>
スライドして下から出現
<script>
$(function() {
var showFlag = false;
var topBtn = $('#pagetop');
topBtn.css('bottom', '-100px');
var showFlag = false;
//スクロールが100に達したらボタン表示
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
if (showFlag == false) {
showFlag = true;
topBtn.stop().animate({'bottom' : '20px'}, 200);
}
} else {
if (showFlag) {
showFlag = false;
topBtn.stop().animate({'bottom' : '-100px'}, 200);
}
}
});
//スクロールしてトップ
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
</script>