ミギムキ

[jQuery] ページの一番上までスクロールさせるボタンを設置したい

やりたいこと

サンプルコード

html

<a href="#" id="btn_scroll_top"></a>

CSS

#btn_scroll_top { display: none; position: fixed; bottom: 30px; right: 30px; z-index: 9999; width: 50px; height: 50px; background-color: #3388dd; text-decoration: none; outline: none; } #btn_scroll_top::after { position: absolute; top: 40%; left: 50%; width: 20px; height: 20px; transform: translateX(-50%) rotate(-45deg); border-right: 4px solid #fff; border-top: 4px solid #fff; content: ""; } @media print, (min-width: 768px) { #btn_scroll_top { width: 70px; height: 70px; } #btn_scroll_top::after { width: 20px; height: 20px; } }

jQuery

jQuery(function($) { var topBtn = $('#btn_scroll_top'); topBtn.hide(); $(window).scroll(function() { if( $(this).scrollTop() > 100 ) { topBtn.fadeIn(); } else { topBtn.fadeOut(); } }); topBtn.click(function() { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); });

仕組み、解説、補足など

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。