Html 导航到另一个页面上的锚点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21600425/
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
Navigate to anchor on another page
提问by user1910388
I simply want to navigate from one page to a specific point on another
我只想从一页导航到另一页的特定点
I have a home page with four sections.
我有一个包含四个部分的主页。
<section>
<a name="section1"></a>
</section>
<section id="section2">
</section>
<section>
<a name="section3"></a>
</section>
<section id="section4">
</section>
Section 2 and 4 feature on every page, so my nav looks like:
每个页面上都有第 2 节和第 4 节，所以我的导航看起来像：
<nav>
<ul>
<li><a href="index.html#section1">ABOUT</a></li>
<li><a href="#section2">APARTMENTS</a></li>
<li><a href="index.html#section3">LANDLORDS</a></li>
<li><a href="#section4">CONTACT</a></li>
</ul>
</nav>
The links aren't navigating to the index page or the desired section of the index page.
这些链接没有导航到索引页或索引页的所需部分。
Thanks in advance.
提前致谢。
Now I have
我现在有
<section>
<a name="section1"></a>
</section>
<section id="section2">
</section>
<section>
<a name="section3"></a>
</section>
<section id="section4">
</section>
and my navigation:
和我的导航：
<nav>
<ul>
<li><a href="#section1">ABOUT</a></li>
<li><a href="#section2">APARTMENTS</a></li>
<li><a href="#section3">LANDLORDS</a></li>
<li><a href="#section4">CONTACT</a></li>
</ul>
</nav>
It is still not working
它仍然无法正常工作
回答by aaronang
Are you sure that you have placed the files in same directory? I've tested the code that you have provided and it's working. However you could try this out (a different way of giving sections an id):
您确定您已将文件放在同一目录中吗？我已经测试了您提供的代码并且可以正常工作。但是，您可以尝试一下（一种为部分指定 ID 的不同方式）：
<section>
<a id="section1">
CONTENT
</a>
</section>
If you have done this, just use the same way of linking:
如果您已经这样做了，只需使用相同的链接方式：
<a href="different-page.html#section1">Section One</a>
回答by Mike Ursitti
Check your javascript code for line that says "event.preventDefault();"
检查您的 javascript 代码中的“event.preventDefault();”行
I found this in a w3school bootstrap template that included this command as part of a block that makes a nice scroll to the hashtag. Once I commented it out, the links worked fine.
我在 w3school 引导程序模板中发现了这个，该模板包含此命令作为块的一部分，可以很好地滚动到主题标签。一旦我将其注释掉，链接就可以正常工作。
回答by Teson
You need an a-name tag, please see http://www.w3schools.com/tags/att_a_name.asp
您需要一个姓名标签，请参阅 http://www.w3schools.com/tags/att_a_name.asp
回答by Rakesh Kumar
I think you are facing this issue with Legacy Browser(IE8 and below). Because I have tested it in firefox, chorm and IE9. It's working fine. But failed in legacy browser.
我认为您在使用旧版浏览器（IE8 及以下）时遇到了这个问题。因为我已经在firefox、chorm和IE9中测试过了。它工作正常。但在旧版浏览器中失败了。
For that you have to use anchor tag instead of div id.
为此，您必须使用锚标记而不是 div id。
Example:
例子：
<a name="section1"></a>
<section>section content goes here </section>
<a name="section2"></a>
<section>section content goes here </section>
<a name="section3"></a>
<section>section content goes here </section>
<a name="section4"></a>
<section>section content goes here </section>
Now you can use any class name you want for your section elements...
现在您可以为您的部分元素使用任何您想要的类名...
