Mar*_*tin 32 html javascript css jquery
我有一个带有锚的URL,它应该正常工作:
site.com/item/id#comment-233
打开时,锚点将位于页面顶部.
如何更改起点？让我们说我希望它50px从顶部下降.
我需要这个的原因是因为我在页面顶部有固定的图层,因此注释显示在固定标题后面div.
以防万一,由于跨浏览器合规性,我更喜欢一种解决方案,它不涉及将注释的容器更改为固定和定位顶部减去标题的高度.
Dam*_*amp 24
假设您的<a>标记没有内容,请使用a为其添加一个类标记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>
小智 10
基于以上建议,这对我有好处:
<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/
添加"display:block;" 为我工作:
<a name="[my-anchor-name]" class="anchor"></a>
.anchor {
position:relative;
top:-50px;
display: block;
}