WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

スムーススクロール jQuery

サイトのトップに戻すだけであれば、以下のようにシンプルな記述で大丈夫です。

$(function() {
  $("#to_top").on('click', function () {
    $('html,body').animate({ scrollTop: 0 }, 'swing');
      return false;
    });
});

複数の場所にスムーススクロールで移動させたい場合

$(function(){
   // #で始まるアンカーをクリックした場合に処理
   $('a[href^="#"]').on('click',function() {
      // スクロールの速度
      var speed = 400; // ミリ秒
    // 移動先を取得
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      // 移動先を数値で取得
      var position = target.offset().top;
      // スムーススクロール
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
   });
});


注意しなければいけないのは、古い書き方だとjqueryの1.12.0以上だと動かないので、必ず正しい記述をしましょう。


間違った記述

$('a[href^=#]')


正しい記述

$('a[href^="#"]')

スクロールメソッド

スクロールした時に引数のfunctionを実行します。また引数に何も設定しない場合は、要素に設定されたスクロール時の処理を実行します。

scrollTop( )

引数を設定しない場合は、jQueryオブジェクトで指定した要素のスクロール位置(Y座標)を取得します。


スクロールが300pxに達したらボタンを表示

   $('.scroll-btn').hide();
    $(window).scroll(function () {
        if ($(this).scrollTop() > 300) {
            $('.scroll-btn').fadeIn();
        } else {
            $('.scroll-btn').fadeOut();
        }
    });


www.jquerystudy.info