anchorjump 從頁面頂部裁剪

Question

我的網站有問題，在我的頁面頂部我制作了一個帶有鏈接的列表/菜單，當您按下鏈接時，頁面會跳轉到您想要的主題，但問題是當您按下鏈接時從頁面頂部裁剪掉，因此您看不到頂部 200 像素。 我該如何解決？ 為什么它首先要這樣做？ 我可以看到，當您按下鏈接時，URL 最后變為“/#jump1”。

這是 HTML：

<ul id="js-menu"> <li class="portfolio-menu" id="menu-li-1"><a href="#jump-2">Tema 2</a></li> <li class="portfolio-menu" id="menu-li-2"><a href="#jump-3">Tema 3</a></li> <li class="portfolio-menu" id="menu-li-3"><a href="#jump-4">Tema 4</a></li> <li class="portfolio-menu" id="menu-li-4"><a href="#jump-5">Tema 5</a></li> <li class="portfolio-menu" id="menu-li-5"><a href="#jump-6">Tema 6</a></li> </ul>

這就是#jump 的應用方式：

<h2 id="jump-3">Tema 3</h2>

我嘗試在 web 上搜索以找到答案，但我還沒有找到...請幫助。

Answer 1

花點時間自己找到解決方案。 從 CSS 到 JS，有無數種選擇，但您可以嘗試以下幾種。

最簡單的解決方案：

#jump-3 {
   padding-top: 50px; /*height of your navbar*/
   margin-top: -50px;
}

另一個解決方案，取自這里，@LGT：

html {
  height: calc(100vh - 84px); /* Fix the height. The 84px here is the height of your nav. */
  margin-top: 84px;
  overflow: hidden; /* Don't scroll. */
}

body {
  height: 100%; /* Set the height to that of html. */
  overflow-y: auto; /* Draw a vertical scrollbar when needed. */
}

另一個解決方案：

#jump-3:target {
    padding-top: 50px; /*height of your navbar*/
} 
/*:taget pseudo class is used when user accesses the selected tag using href*/

Answer 2

當您的導航具有粘性或固定 position 時會發生這種情況。您可以使用 css 中的 scroll-padding-top 或 scroll-margin-top 屬性修復它。

scroll-padding-top 屬性應用於父容器，就像 CSS 頂部填充一樣，定義從滾動區域頂部的偏移量。 scroll-margin-top屬性應該應用於每個錨點部分。 喜歡：

nav {
  position: sticky;
  top: 0;
  width: 100vw;
  height: 60px;   <--- Value for scroll-margin-top property
  background: #F4F2F3;
}
section {
  width: 100vw;
  height: 100vh;
  scroll-margin-top: 60px;  <--- Value from nav height
  padding: 1rem;
}

這里：

 body { margin: 0; padding: 0; } nav { position: sticky; top: 0; z-index: 999; width: 100vw; height: 60px; background: #F4F2F3; } ul { width: 100vw; height: 60px; margin: 0; display: flex; justify-content: space-around; align-items: center; list-style: none; } li { height: 100%; display: flex; justify-content: center; align-items: center; } a { color: #656256; text-decoration: none; } section { position: relative; width: 100vw; height: 100vh; scroll-margin-top: 60px; padding: 1rem; color: #FFFFFF; } #anchor-1 { background: #D3B88C; } #anchor-2 { background: #9EBC9F; } #anchor-3 { background: #656256; }

 <nav> <ul> <li><a href="#anchor-1"> Menu link with anchor 1 </a></li> <li><a href="#anchor-2"> Menu link with anchor 2 </a></li> <li><a href="#anchor-3"> Menu link with anchor 3 </a></li> </ul> </nav> <section id="anchor-1"> Section 1 </section> <section id="anchor-2"> Section 2 </section> <section id="anchor-3"> Section 3 </section>