HTMLコーディングをしていてアンカーリンク（#をつけたページ内のリンク）先の見える部分が、固定ヘッダーなどで隠れたり、ずらしたいなってとき多いと思います。
いくつか対処法があるのでこちらにまとめておきます。
なんでいくつか紹介するかというと、サイトによってうまく動かなかったりする場合があるので、代替案がいくつかあった方がいいと思った為です。
参考にしてみてください。
目次
方法その１：CSSのscroll-paddingを使用する
ページ内のアンカーリンク全て高さが同じものでいいなら、大体これで解決すると思います。
CSS
:root{
scroll-padding: 150px; /*ずらしたい高さ*/
scroll-behavior: smooth; /*スムーススクロール*/
}これでページ全体のアンカーリンク先がずれるようになります。
方法その２：CSSの擬似要素で対処
こちらはHTML側の編集も必要です。リンク先の要素にclassを振ってあげて、
それに付随している擬似要素を見えないようにheightとmarginで調整しているという仕組み。
HTML
<h2 id="gorogoro" class="anchor">
これはアンカーリンクのターゲットとなっている要素です
</h2>CSS
:root{
scroll-behavior: smooth; /*スムーススクロール*/
}
.anchor{
position: relative;
}
.anchor::before{
content: '';
display: block;
height: 150px;
margin-top: -150px;
}方法その３：JavaScriptを使う
jQueryは不要です。
JavaScript
document.addEventListener("DOMContentLoaded", function () {
const headerHeight = 150; // ずらしたい高さpx
// すべてのアンカーリンクに対して処理
document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
anchor.addEventListener("click", function(e) {
const targetId = this.getAttribute("href");
// 無効なhref（例: # だけ）を除外
if (targetId === "#" || targetId === "") return;
const targetElement = document.querySelector(targetId);
if (!targetElement) return;
e.preventDefault();
const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - headerHeight;
window.scrollTo({
top: targetPosition,
behavior: "smooth" // スムーススクロール
});
});
});
});上記いずれかを使えば解決すると思います。