HTML 锚点跳转不起作用

Question

标题就是它所说的意思。当我设置一个链接跳转到某个 div 时它不起作用。例如，当我说<a href="#Section1>Section 1</a>并单击它时，它应该跳转到名为“Section1”的锚标记，<a name="Section1"></>但没有任何反应。

<main id="Main">
    <div class="Container">
        <div class="Section-Links Left Box-Sizing">
            <div class="Links">
                <a href="#test">Test Post</a>
                <a href="#test2">Test Post</a>
                <a href="#test3">Test Post</a>
                <a href="#test4">Test Post</a>
                <a href="#test5">Test Post</a>
                <a href="#test6">Test Post</a>
                <a href="#test7">Test Post</a>
                <a href="#test8">Test Post</a>
                <a href="#test9">Test Post</a>
                <a href="#test10">Test Post</a>
            </div>
        </div>
        <div class="Sections Left Box-Sizing">
            <div class="Section">
                <a name="Test"></a>
                <span class="Section-Title">Test Section</span>
                <p class="Section-Text">Some Random Words Here.</p>
            </div>

            <div class="Section">
                <a name="Test2"></a>
                <span class="Section-Title">Test Section</span>
                <p class="Section-Text">Some Random Words Here.</p>
            </div>

            <div class="Section">
                <a name="Test3"></a>
                <span class="Section-Title">Test Section</span>
                <p class="Section-Text">Some Random Words Here.</p>
            </div>

            <div class="Section">
                <a name="Test4"></a>
                <span class="Section-Title">Test Section</span>
                <p class="Section-Text">Some Random Words Here.</p>
            </div>

            <div class="Section">
                <a name="Test5"></a>
                <span class="Section-Title">Test Section</span>
                <p class="Section-Text">Some Random Words Here.</p>
            </div>

            <div class="Section">
                <a name="Test6"></a>
                <span class="Section-Title">Test Section</span>
                <p class="Section-Text">Some Random Words Here.</p>
            </div>

            <div class="Section">
                <a name="Test7"></a>
                <span class="Section-Title">Test Section</span>
                <p class="Section-Text">Some Random Words Here.</p>
            </div>

            <div class="Section">
                <a name="Test8"></a>
                <span class="Section-Title">Test Section</span>
                <p class="Section-Text">Some Random Words Here.</p>
            </div>

            <div class="Section">
                <a name="Test9"></a>
                <span class="Section-Title">Test Section</span>
                <p class="Section-Text">Some Random Words Here.</p>
            </div>

            <div class="Section">
                <a name="Test10"></a>
                <span class="Section-Title">Test Section</span>
                <p class="Section-Text">Some Random Words Here.</p>
            </div>
        </div>
        <div class="Clear"></div>
    </div>

    <p class="Footer-Masthead">Created By Moussa Harajli.</p>
</main>

如果你想测试这个去这里。 http://67.184.73.19/Projects/Assassins/rules.php

Answer 1

锚链接不是指向names 而是指向ids

所以改变例如：

<a name="Test7"></a>

到：

<a id="Test7"></a>

并且您不应更改 id 属性和链接中 id 的大小写。

Answer 2

尝试在div标签中设置 id ：

<div id="test" class="Section">...</div>

这应该有效：

<a href="#test">Test Post</a>