アトリエロワ

headerを固定した時のページ内リンク。Chrome、Firefox、Safari対応

HTML CSS。headerを固定した時のページ内リンク。Chrome、Firefox、Safari対応

headerを固定した時のページ内リンク

HTML

<a href="#release">ここをクリックでID releaseにページ内リンク</a>
<div id="release" class="pagelink">ここにジャンプしたい</div>

方法1：scroll-margin-top: 100px;

【注意】javascriptでページスムーズスクロールを記述している場合は、この方法では効かないことがある。
そのためhtmlでスムーズスクロールを設定し直す。 

html {
  scroll-behavior: smooth;
}

.page-link {
  scroll-margin-top: 100px;
}

方法2：css

古いやり方なので今は使わない

.pagelink {
  padding-top: 100px;
  margin-top: -100px;
  position: relative;
  z-index: 1;
  display: block;
}

HOME > html+css > headerを固定した時のページ内リンク。Chrome、Firefox、Safari対応

html+css

html+css

+ More