<!--ページTOP--> <style> #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #000; text-decoration: none; color: #fff; width: 100px; padding: 30px 0; text-align: center; display: block; border-radius: 5px; } #page-top a:hover { text-decoration: none; background: #ff0000; } </style> <script> $(function() { var topBtn = $('#page-top'); 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> <p id="page-top"><a href="#wrap">PAGE TOP</a></p>