导航到另一页上的锚点

Question

我只想从一个页面导航到另一页的特定点。

我有一个带有四个部分的主页：

<section>
   <a name="section1"></a>
</section>
<section id="section2">
</section>
<section>
   <a name="section3"></a>
</section>
<section id="section4">
</section>

每个页面上的第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>

链接没有导航到索引页面或索引页的所需部分。

现在我有：

<section>
       <a name="section1"></a>
</section>
<section id="section2">
</section>
<section>
   <a name="section3"></a>
</section>
<section id="section4">
</section>

和我的导航：

<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>

它仍然不起作用。

Answer 1

您确定将文件放在同一目录中吗？我已经测试了您提供的代码，并且正在工作。但是，您可以尝试一下（给出各节ID的另一种方法）：

<section>
    <a id="section1">
        CONTENT
    </a>
</section>

如果您这样做了，只需使用相同的链接方式：

<a href="different-page.html#section1">Section One</a>

Answer 2

检查您的JavaScript代码是否为" event.preventdefault（）;＆quot"。

我在W3Schools的引导模板中找到了这一点，该模板将此命令包括为A＆lt; gt;可以使主题标签滚动的块。一旦我发表评论，链接都可以正常工作。

Answer 3

我认为您正在使用传统浏览器（Internet Explorer 8及以下）面对这个问题。因为我已经在Firefox，Chrome和Internet Explorer 9中对其进行了测试。但是它在传统浏览器中失败了。

为此，您必须使用锚定标签（a）而不是div id。

示例：

<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>

现在您可以使用所需的任何类名来为您的部分元素...

Answer 4

您需要一个名称标签，请参阅http://www.w3schools.com/tags/att_a_name.asp