アンカーリンクが外部からのリンクでずれる場合の対処
通常、以下のような形で、スムーズスクロールなどのを実装していると思います。
$(document).ready(function($) {
var headerHeight = 100 // ヘッダーの高さ
$("a[href*=\\"#\\"]:not([href=\\"#\\"])").click(function() {
if (location.pathname.replace(/^\\//, "") === this.pathname.replace(/^\\//, "") && location.hostname === this.hostname) {
var target = $(this.hash)
target = target.length ? target : $("[name=" + this.hash.slice(1) + "]")
if (target.length) {
$("html, body").animate({
scrollTop: target.offset().top - headerHeight
}, 500)
return false
}
}
})
})ヘッダーが以下のような場合…
header {
position: fixed;
top: 0;
height: 100px;
width: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 9999;
}外部リンクで、飛んできた際に、スクロール位置がずれるという問題が発生します。
そんな時は、以下のようにCSSを追加することで、外部からのリンクに対して、もヘッダーの高さ分を考慮したアンカーリンクになります。
html, body {
scroll-padding-top: 100px; // ヘッダーの高さ
}