锚跳从页面顶部裁剪

Question

我有一个问题，我的网站，在我的页面的顶部，我做了一个列表/菜单与链接，当你按下链接的页面跳转到你想要的主题，但问题是，当你按下链接它作物的页面顶部，所以你不能看到顶部200px。我该如何解决这个问题?为什么它会这样做呢?我可以看到当你按下链接的时候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>

我试着在网上搜索找到答案，但我没有找到它…请帮助。

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

当你的导航有一个固定的位置时，这种情况就会发生。你可以在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>