webtips

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>