memorandum

備忘録

2018.01.30

ページ内、ページ外でスムーススクロールを実装する

ホームページ内にてリンクやボタンをクリックしたときにスクロールする挙動のことをスムーススクロールと言います。
ページ内・ページ外でのスムーススクロール、ヘッダー固定時のスムーススクロールの実装方法は以下の通りです。

ページ内でのスムーススクロール

$(function(){
  $('a[href^=#]').click(function(){
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    $("html, body").animate({scrollTop:position}, 500, "swing");
    return false;
  });
});

ページ外でのスムーススクロール

$(function(){
  $(window).on('load', function() { //ロード後に実行
    var url = $(location).attr('href');
    setTimeout(function(){ //ロード時の処理を待ち、時間差でスクロール実行
      if(url.indexOf("#") !== -1){
        var id = url.split("#");
        var $target = $('#' + id[id.length - 1]);
        if($target.length){
          var position = $target.offset().top;
          $("html, body").animate({scrollTop:position}, 500, "swing");
        }
      }
    },500);
  });
});

ヘッダー固定時のスムーススクロール

$(function(){
  var headerHight = 100; //ヘッダーの高さ
  $('a[href^=#]').click(function(){
    var href= $(this).attr("href");
    var target = $(href === "#" || href === "" ? 'html' : href);
    var position = target.offset().top - headerHight; //ヘッダーの高さ分位置をずらす
    $("html, body").animate({scrollTop:position}, 500, "swing");
    return false;
  });
});

ヘッダー固定時のスムーススクロールは、ヘッダーの高さ分ずれるが生じるのでその分位置をずらします。

MAIL制作・お見積りのご依頼
ご相談・お問い合わせ