Blog

HOME > Web > javascript > 【javascript】アンカーリンクのズレを修正

【javascript】アンカーリンクのズレを修正

2023/05/16

javascript

備忘録です。

『アンカーリンクのズレを修正』と検索すると固定ヘッダーのズレ修正について記述したサイトは多いのですが、特定のエリアを指定してズレを修正する参考サイトがありませんでした。
そこでヘッダーのズレを修正するスクリプトを改修したものを作成しました。

そもそもなぜ必要になったかというとLPでカスタム投稿一覧を表示したところ、最下部にあるフォームに遷移されなくなり上にある別の項目に遷移されるという事象がありました。
試しにカスタム投稿を非表示にしたところ、フォームに遷移したので、カスタム投稿の高さが原因であることがわかりました。

  $('a[href^="#"]').click(function() {
    // 移動先をずらすためにsection-idの高さを取得
    var adjust = $('section-id').height(); //任意のidを指定
    //ページ内リンク先を取得
    var href= $(this).attr("href");
    //リンク先が#か空だったらhtmlに
    var hash = href == "#" || href == "" ? 'html' : href;
    // 移動先を調整 idの要素の位置をoffset()で取得して代入
    var position = target.offset().top - adjust;　//追加
    //スクロール実行
    scrollToAnker(hash);
    //リンク無効化
    return false;
  });

もし同様のお悩みがある方は参考にしてみてください。

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

神社仏閣ホームーページ制作

ホームページ制作問合せ

口コミロボ