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（）;”

的行

我在一个w3school引导程序模板中发现了这个问题，该模板包含了这个命令作为一个块的一部分，它可以很好地滚动到主题标签。一旦我评论它，链接工作正常。

Answer 3

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

Answer 4

我认为您在使用旧版浏览器（IE8及以下版本）时遇到此问题。因为我在firefox，chorm和IE9中测试过它。它工作正常。但遗留浏览器失败了。

为此你必须使用锚标记而不是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>

现在，您可以为节元素使用所需的任何类名...

导航到另一页上的锚点

4 个答案: