Html 锚链接在错误的位置着陆
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6826741/
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
Anchor link landing in wrong position
提问by JVG
Probably a stupid question, but I honestly can't wrap my head around what's going wrong here.
可能是一个愚蠢的问题，但老实说，我无法理解这里出了什么问题。
http://harrisonfjord.com/thinkinc/
http://harrisonfjord.com/thinkinc/
A site I'm building at the moment. I want to make an anchor link at http://harrisonfjord.com/thinkinc/index.php#sponsors. I've set up the anchor to occur just before in the following code:
我目前正在建设的网站。我想在http://harrisonfjord.com/thinkinc/index.php#sponsors上做一个锚链接。我已经在以下代码中将锚点设置为发生在之前：
<a name="sponsors"></a>
<div class="sponsors">
<div class="sponsors-left">
<h2>Sponsors</h2>
<p>Support the lovely folks who support us! Visit their websites, join their mailing lists and peruse their wares. They are all highly-deserving of your custom, and we're thrilled to have each and everyone one of them on-board!</p>
</div>
However, when you click on the anchor link it lands about halfway down the div. I thought it might have been a problem with the images loading after the anchor link loads, so I manually put in widths/heights for all of the tags. I also did the same for the cufon text replacement in the title bar.
但是，当您单击锚链接时，它会落在 div 的一半左右。我认为这可能是锚链接加载后图像加载的问题，所以我手动输入所有标签的宽度/高度。我也对标题栏中的 cufon 文本替换做了同样的处理。
None of that helped, so now I turn to you. The anchor is also not working in Firefox, for whatever reason. Any thoughts on what I've done wrong here?
这些都没有帮助，所以现在我转向你。无论出于何种原因，锚点也无法在 Firefox 中工作。对我在这里做错了什么有什么想法吗？
Cheers!
干杯!
采纳答案by msw
I think the problem is resulting from the anchors with no contents that you are using.
我认为问题是由没有您正在使用的内容的锚点引起的。
Also, it appears that name=has been deprecated in favorof id=as a fragment identifier in certain elements (including A) which makes a kind of sense as ID attributes are unique whereas NAME attributes are not so guaranteed.
此外，似乎name=已赞成弃用的id=如在某些元件（包括一个片段标识符A），这使得一种意义上ID属性是独特而NAME属性不是这样保证。
I'd try sticking the fragment identifier in the actual renderable entity such as:
我会尝试将片段标识符粘贴在实际的可渲染实体中，例如：
<h2 id="sponsors">Sponsors</h2>
and see where that gets you. Incidentally, it looks like a good conference, I hope you get a comp admission.
看看这让你在哪里。顺便说一句，这看起来是一个不错的会议，我希望你能得到补偿。
回答by vard
I got the exact same issue in Firefox and solved it with this (same as sasi answer but more generic - it detect if there is an anchor in the url and scroll to it):
我在 Firefox 中遇到了完全相同的问题并用这个解决了它（与 sasi 答案相同但更通用 - 它检测 url 中是否有锚点并滚动到它）：
$(document).ready(function() {
if(window.location.hash.length > 0) {
window.scrollTo(0, $(window.location.hash).offset().top);
}
});
It seems it's a well known issue, see https://bugzilla.mozilla.org/show_bug.cgi?id=60307
这似乎是一个众所周知的问题，请参阅https://bugzilla.mozilla.org/show_bug.cgi?id=60307
回答by sasi
I got problem in iphone for links with fragments, having
<a href="#info">TYPES OF INFORMATION WE COLLECT</a>, correctly linking to
<h3 id="info">TYPES OF INFORMATION WE COLLECT</h3>.
我在 iphone 中遇到了带有片段的链接的问题，有
<a href="#info">TYPES OF INFORMATION WE COLLECT</a>，正确链接到
<h3 id="info">TYPES OF INFORMATION WE COLLECT</h3>.
That wasn't working properly, and I fixed with a solution like this (using jQuery):
那不能正常工作，我用这样的解决方案（使用 jQuery）修复：
window.scrollTo(0,$('#info').offset().top);
回答by msw
I don't know what standard your page is trying to conform to, but it is full of errors:
我不知道你的页面试图符合什么标准，但它充满了错误：
Some of them so severe, for example:
其中一些非常严重，例如：
- Unable to Determine Parse Mode!
- No DOCTYPE found, and unknown root element. Aborting validation.
- 无法确定解析模式！
- 未找到 DOCTYPE，并且根元素未知。中止验证。
that the validator gives up. Contrasted with a page like gnu.org
验证器放弃。与 gnu.org 之类的页面形成对比
You should be pleased that the site renders at all.
您应该很高兴该网站完全呈现。
回答by crisc82
I solved this with a trick, I have put an empty span element with the required ID and a line break before the div
我用一个技巧解决了这个问题，我在 div 之前放置了一个具有所需 ID 和换行符的空跨度元素
<span id="sponsors"> </span>
<br>
<div class="sponsors">
<div class="sponsors-left">
<h2>Sponsors</h2>
<p>Support the lovely folks who support us! Visit their websites, join their mailing lists and peruse their wares. They are all highly-deserving of your custom, and we're thrilled to have each and everyone one of them on-board!</p>
</div>
</div>
<a href="#sponsors">GO TO SPONSORS</a>
