memorandum

備忘録

2018.01.16

jQueryでスクロールしたら表示されるトップへ戻るボタン

ホームページ制作において、ページをスクロールしていった際にページ上部へ移動したいとき
クリック一つで一気に移動できるボタンは必須とも言えます。

難しいように思えるかもしれませんが、意外と簡単に設置できます。

まずは、head内にjQueryの設置

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

次は、トップに戻るボタンの設置

<div class="pagetop">
  <a href="#">ページトップへ</a>
</div>

最後に、JavaScriptを追加

$(function() {
  var pagetop = $('#pagetop');
  $(window).on('load scroll',function(){
    if($(window).scrollTop() >= 100){ // ボタンの出現位置(100pxスクロールしたら)
      pagetop.fadeIn();
    } else if($(window).scrollTop() < 100){ // ボタンの消える位置(スクロール位置が100px以内になったら)
      pagetop.fadeOut();
    }
  });
  pagetop.on('click',function(){
    $('html,body').animate({ scrollTop : '0' }, 500); // 戻るスピード(数字が小さいほど早い)
  });
});
MAIL制作・お見積りのご依頼
ご相談・お問い合わせ