当给定一个命名锚点(#comments)时,使页面跳转到比实际锚点低30px

时间:2011-11-01 04:27:34

标签: html css anchor

这可以不使用jQuery或javascript吗?我试图相对定位锚标签,然后使用top:-30px,但这似乎并不重要。页面总是跳转到渲染锚标记的位置,而不是CSS移动它的位置。有什么建议吗?

解决方案:

将链接放在您要定位的元素中。在父元素(position:relative)中,在命名锚点上(position:absolute; top:-30px)。像魅力一样。

2 个答案:

答案 0 :(得分:1)

难道你不能只在包含锚链接ID的元素顶部放一些填充吗? 我只是尝试了它似乎工作。

的CSS:

h2 {padding-top:50px;}

HTML:

<ul>
  <li><a href="#here">Here</a></li>
</ul>

<h2 id="here">Title</h2>
<p>blah blah</p>

答案 1 :(得分:0)

难道你不能只使用简单的东西:

    ul > li > a {
        position: relative;
        top: -30px;
    }

这将使你的锚点显示在30px以上,而不会改变你的布局的其余部分。 jsFiddle example

我已经添加了这些数字,以便你可以看到它正在做什么,当然可能需要一些试验和错误,但它应该做我想象的技巧。