当我点击链接时,它应该跳转到页面上的锚点,但我似乎无法弄清楚如何在锚点顶部添加间距。单击锚点时,它会跳转到页面上的锚点,但锚点位于浏览器的顶部。我想在锚之前留出空间,因为我在顶部有一个棒状导航栏。我已经尝试了填充顶部,边缘顶部,一切都无法解决问题。下面是一张图片来解释我想要做什么。
单击锚点时,它会跳转到页面上的锚点,但默认为位于浏览器的顶部。
我想要的是当我点击锚标签时有间距。
https://jsfiddle.net/yao25Lxc/3/
我已经尝试了
margin-top:
和
padding-top:
希望我解释得很好。我需要间距的原因是因为我有一个固定的顶栏,它覆盖了我在页面上链接的标题,所以我需要空间来弥补,似乎没有任何工作。
我链接的标题文字位于顶栏下方
当我点击锚点时我需要间距,所以我的顶栏不会覆盖文字。
答案 0 :(得分:2)
定位h3元素并为其添加行高。也许不是最优雅的解决方案,但它确实有效。
HTML:
<nav>
<ul>
<li class=""><a href="#anchor">Test</a></li>
</ul>
</nav>
<div class="spacecontainer">
</div>
<h3 id="anchor">
<a id="">TEXT</a>
</h3>
<div class="spacecontainer">
</div>
<div class="spacecontainer">
</div>
CSS:
.spacecontainer {
width:100%;
height:500px;
}
h3 {
line-height:50px;
}
答案 1 :(得分:1)
为#anchor
创建一个css并在那里应用padding-top
。例如:
#anchor{ padding-top: 30px }