Javascript 更改#anchor 的默认起始位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4996330/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing default starting position of #anchor
提问by Martin
I have a URL with an anchor that is working as it should:
我有一个带有锚点的 URL，它可以正常工作：
site.com/item/id#comment-233
When opened, the anchor will be positioned at exactly the top of the page.
打开时，锚点将正好位于页面顶部。
How do I change the starting point? Let's say I want it to be 50pxdown from the top.
如何更改起点？假设我希望它50px从顶部向下。
The reason I'm needing this is because I have fixed layers at the top of the page, so the comment is appearing overlapped behind the fixed header div.
我需要这个的原因是因为我在页面顶部有固定层，所以评论出现在固定标题后面重叠div。
Just in case, because of cross-browser compliance I prefer a solution that does not involve changing the container of the comment to fixed and positioning top minus the height of the header.
以防万一，由于跨浏览器的合规性，我更喜欢不涉及将评论的容器更改为固定和定位顶部减去标题高度的解决方案。
采纳答案by Damp
Assuming your <a>tag has no content, add a class to it tag with a position:relative; top:-50px;
假设你的<a>标签没有内容，添加一个类到它的标签position:relative; top:-50px;
Depending on your document, you my also have to wrap it in an absolute <div>
根据您的文件，您也必须将其包装成绝对的 <div>
This should be cross-browser compatible if implemented correctly.
如果正确实施，这应该是跨浏览器兼容的。
EDIT
编辑
This is the test I've done locally and it works fine in FF 3.6
这是我在本地完成的测试，它在 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>
回答by Mark
This worked a treat for me, based on the above suggestion:
根据上述建议，这对我来说是一种享受：
<a name="[my-anchor-name]" class="anchor"></a>
.anchor {
position:relative;
top:-30px; /* or whatever value you need */
}
回答by lincolnge
.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>
from http://www.pixelflips.com/blog/anchor-links-with-a-fixed-header/
来自http://www.pixelflips.com/blog/anchor-links-with-a-fixed-header/
回答by Allan Berger
Adding "display: block;" worked out for me:
添加“显示：块；” 为我工作：
<a name="[my-anchor-name]" class="anchor"></a>
.anchor {
position:relative;
top:-50px;
display: block;
}
回答by danieleds
This code works on Firefox, Chrome, IE and probably others too:
此代码适用于 Firefox、Chrome、IE 和其他可能的代码：
<a id="comment-3" class="shifted_anchor"> </a>
<div>
... comment ...
</div>
Where this is the stylesheet:
这是样式表：
a.shifted_anchor {
position: relative;
top: -35px;
margin: 0;
padding: 0;
float: left;
}
The key is the floatattribute: we use it to avoid the extra vertical space caused by , which in turn is needed for cross-browser compatibility.
关键是float属性：我们使用它来避免由 引起的额外垂直空间 ，这反过来又是跨浏览器兼容性所必需的。
回答by Chris Nicola
So I combined a couple of the ideas here and came up with one that works well for me and across all browsers. The empty anchors do not seem to work well with webkit browsers, definitely doesn't work on Chrome. Adding a pseudo element to the anchor fixes this without breaking layouts.
所以我在这里结合了几个想法，并提出了一个对我和所有浏览器都适用的想法。空锚点似乎不适用于 webkit 浏览器，绝对不适用于 Chrome。向锚点添加伪元素可以解决此问题，而不会破坏布局。
a.anchor { position: relative; top: - $offsetHeight; visibility: hidden; }
a.anchor:before {
content:"";
float: left;
height: 0px;
}
Just replace $offsetHeightwith whatever you need.
只需更换$offsetHeight您需要的任何东西。
