【JQuery】トップリンクボタンをスクロールで表示させる
ページのトップへ移動するトップリンクボタン、ある程度ページを下へスクロールしないと必要ないですよね。ということで、トップリンクボタンを画面が下へスクロールされると表示されるようにJQueryで実装します。
HTML
<p class="topLink"><a href="#top">ページトップへ</a></p>
CSS
.topLink { display:none; width:50px; height:50px; background:url(img/top_link_button.png) no-repeat 0 0; text-indent:-9999px; position:fixed; right:10px; bottom:60px; z-index:2; } .topLink a { display:block; width:50px; height:50px; }
CSSは「position:fixed;」に指定し、「display:none;」で非表示にしておきます。
JQuery
<script> $(document).ready(function() { var pagetop = $('.topLink'); $(window).scroll(function () { if ($(this).scrollTop() > 100) { // ボタンが表示されるスクロール量(100の部分) pagetop.fadeIn(); // fadeIn(500)などとすれば速度指定できる } else { pagetop.fadeOut(); // fadeOut(500)などとすれば速度指定できる } }); pagetop.click(function () { $('body, html').animate({ scrollTop: 0 }, 500); // スクロースされる時の速度(500の部分) return false; }); }); </script>
コメントを残す