js ページ内スクロール

ヘッダー追従の場合アンカーリンクでスクロールしても
上部が隠れてしまうという事件が。
そう言った場合には、ヘッダーの高さを引いて遷移させる。
かつ、諸々css指定して高さがリンクだけでうまく一致しなかった場合には、
ヘッダーの高さプラス-数値を指定して、設定することで丁度いいところへ!

//スクロール
$(function(){
  $('a[href^="#"]').click(function(){
    var speed = 500;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var header = $('nav').height();
    var position = target.offset().top - header - 20;
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });
});

元コードは以下にて参考に。。。

ページ内リンク(アンカーリンク)で特定の場所までスムーススクロールさせる | Recooord | Web制作で扱うコーディングスニペットを紹介
jQueryでスムーススクロールを実装します。スムーススクロールとはページ内リンク(アンカーリンク)までの距離をアニメーションして移動する実装になります。ホーム

コメント

タイトルとURLをコピーしました