HTML Anchor Jump Doesn't Work

Question

The title means what it says. when i setup a link to jump to a certain div it doesn't work. For example when i say <a href="#Section1>Section 1</a> and click it, it should jump to the anchor tag with the name of 'Section1' <a name="Section1"></> but nothing happens.

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

if you would like to test this go here. http://67.184.73.19/Projects/Assassins/rules.php

Solution 1

Anchor links doesn't point to names but to ids

so change for example:

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

to:

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

And you should not change the capitalization of the ids in the id attribute and the links.

Solution 2

Try setting the id in the div tag:

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

And this should work:

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

Solution 3

The reason behind your problem is that you have different ID's in your links since test2 is not the same as Test2.

Though... from my experience the <a> element is essentially redundant since the following works in all modern browsers:

<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>
            </div>
        </div>
        <div class="Sections Left Box-Sizing">
            <div id="test" class="Section">
                <span class="Section-Title">Test Section</span>
                <p class="Section-Text">Some Random Words Here.</p>
            </div>

            <div id="test2" class="Section">
                <span class="Section-Title">Test Section</span>
                <p class="Section-Text">Some Random Words Here.</p>
            </div>

Comments

[Musa]

It used to... and still does