WEBサイト制作の勉強

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

フェリカテクニカルアカデミー

jQuery animateメソッドを使ったスムーススクロール

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

$(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;
   });
});
スクロールの位置・速さなどを調整する

もし、スクロールの位置を変えたい場合は、ターゲット要素の位置(offcet)を調整することが変更できます。

以下はターゲット要素より、50px上にスクロールするサンプルです。

var position = target.offset().top;
var position = target.offset().top - 50;

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


間違った記述

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


正しい記述

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


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

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