更改#anchor的默认开始位置

2018-06-22 02:34:26

我有一个正在工作的锚链接，网址为：

site.com/item/id#comment-233

打开时，锚点将定位在页面的顶部。

我如何改变起点？假设我希望它从顶部向下50px 。

我需要这个的原因是因为我在页面顶部有固定图层，所以评论出现在固定标题div后面。

以防万一，由于跨浏览器的兼容性，我更喜欢一个解决方案，不涉及将注释的容器更改为固定和定位顶部减去标题的高度。

假设你的<a>标签没有内容，添加一个类给它，标签的position:relative; top:-50px; position:relative; top:-50px;

根据你的文档，你也必须把它包装在一个绝对的<div>

如果实施正确，这应该是跨浏览器兼容的。

编辑

这是我在本地完成的测试，它在FF 3.6中正常工作

<html>

    <body style='margin:0; padding:0;'>
        <div style='position:fixed; height:50px; background-color:#F00; width:100%'>
        Fixed header
        </div>
        <div style='padding-top:50px'>
            <div style='height:100px; margin-top:10px; background-color:#0F0'><a href='#linkhere'>Go to anchor</a></div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>
                <a name='linkhere' style='position:relative; top:-75px;'></a>
            Link here</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
        </div>
    </body>
</html>

基于以上建议，这对我来说很有帮助：

<a name="[my-anchor-name]" class="anchor"></a>

.anchor {
    position:relative;
    top:-30px; /* or whatever value you need */
}

.anchor{
  display: block;
  height: 115px; <!--same height as header-->
  margin-top: -115px; <!--same height as header-->
  visibility: hidden;
}

<span class="anchor"></span>
<div>content...</div>

从http://www.pixelflips.com/blog/anchor-links-with-a-fixed-header/

链接地址: http://www.djcxy.com/p/62045.html

上一篇: Changing default starting position of #anchor

下一篇: Problem with HTML anchor in absolute DIV 300px from the top..?