2017/03/25
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>