JavaScript
$(function() { var topBtn = $('#pagetop'); topBtn.hide(); //スクロールが100に達したらボタン表示 $(window).scroll(function() { if ($(this).scrollTop() > 100) { topBtn.fadeIn(500); } else { topBtn.fadeOut(500); } }); //スクロールしてトップ topBtn.click(function() { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); });
html
<div id="pagetop"> <img src="img/pagetop.svg" alt="pagetop" width="50" height="50"> </div>
css
#pagetop { width: 50px; height: 50px; position: fixed; right: 40px; bottom: 40px; z-index: 100; cursor: pointer; }