webサイト制作の勉強|1月ブログ

webサイト制作の勉強に関する解説ブログです。

スムーススクロール

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

$(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;
   });
});


場合によってはある程度スクロールしてから表示させたい場合もあります。
その場合、まず「.hide」で見せなくさせて、ある条件(今回の場合は何pxスクロールしたら)になったら、
「.fadeIn」で表示させ、ある条件以外の時は「.fadeOut」で非表示にさせましょう。

scrollイベント

要素がスクロールした時のイベントとして関数を指定できます。

scrollTopイベント

「scrollTop()」を使用した場合、要素の最上部から縦スクロールした現在位置の上部までのピクセル数を取得します。

位置の取得

position()は、親要素から見た座標を取得します。 offset()は、親要素関係なく、documentから見た座標を取得します。
さらに複数回使う要素は変数に置き換えた方が効率的なので記述するパターンも覚えておきましょう。

 //var topBtn = $('#to_top'); 要素を変数に置き換える場合

    $('#to_top').hide();
    //スクロールが100に達したらボタン表示
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $('#to_top').fadeIn();
        } else {
            $('#to_top').fadeOut();
        }
    });