Solution for anchor ties not working?

[Jocelyn_5639]

Hello!

I am new to Dreamweaver and html code. I was writing code out for my website. My goal is to have a menu where you can click on the word and then it would shoot to that section of the page. I've done anchor ties in the past and haven't had any issues. No matter what I type in it does not zoom to that section of the page. Here is my html code and the "name" ties for the anchor:

<div id="nav-bar">

        <ul class="nav">

          <li> <a href="#about">About</a></li>

            <li><a href="#education">Education</a></li>

            <li><a href="#skills" >Skills</a></li>

            <li><a href="#experience">Experience</a></li>

            <li><a href="#contact">Contact</a></li>

         </ul>

    </div>

<div class="about"> <a name="about"><img src="ThesisWebsite/about.png" width="360" height="115.5" alt=""/></a></div>

Any help is appreciated! I am still pretty new so I am limited in what I can do. I can do html, Css and javascript, but nothing else at the moment. Thank you!

[Nancy OShea]

Named anchors are obsolete.    We use IDs now.

<a href="#about">Link to About</a>

<a href="#edu">Link to Education</a>

<a href="#skills>Link to Skills</a>

<section id="about">

This is the about section on the same page....

</section>

<section id="edu">

This is the edu section on the same page....

</section>

<section id="skills">

This is the skills section on the same page....

</section>

[Jocelyn_5639]

<div id="nav-bar">

        <ul class="nav">

          <li> <a href="#about">About</a></li>

            <li><a href="#education">Education</a></li>

            <li><a href="#skills" >Skills</a></li>

            <li><a href="#experience">Experience</a></li>

            <li><a href="#contact">Contact</a></li>

         </ul>

    </div>

<div class="about"><section id="about"> <img src="ThesisWebsite/about.png" width="360" height="115.5" alt=""/></section></div>

For some reason that still doesn't work...

[Nancy OShea]

I guess there's more to this than you're showing us. 

See working demo below.  Click on top menu items to see it work.

Bootstrap Parallax Template

For best results, a long page of content with ample space between IDs is required.

[Jon Fritz · Accepted solution]

Usually, when something like what you've show us doesn't work (the snippet you've shared is coded correctly and should jump to the about id when the #about link is clicked), there is either not enough room beneath the destination to bring the linked-to section to the top, or you have multiple instances of the same id on the page and the browser is confused when you click because it has multiple possible destinations.

Run the validator at http://validator.w3.org/nu and make sure you don't have any major errors, including duplicate ids.