网站导航无法滚动以更正手机上的div

Question

When I click on the nav link it scrolls me to the top of the page on mobile instead of the correct id section. I am not sure why this is happening.

Here is the code:

$(function () {
    $('a[href^="#"]').click(function (event) {
        var id = $(this).attr("href");
        var offset = 110;
        var target = $(id).offset().top - offset;

        $('html, body').animate({
            scrollTop: target
        }, 500);
        event.preventDefault();
    });
});

<div id="nav-ph">
    <div class="nav-btn-ph"></div>
    <ul class="main-nav-ph">
        <li><a href="#the-advantage">THE ADVANTAGE</a>

        </li>
        <li><a href="#services">OUR SERVICES</a>

        </li>
        <li><a href="#team">OUR TEAM</a>

        </li>
        <li><a href="#news">MAKING NEWS</a>

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

        </li>
    </ul>
</div>
<div id="the-advantage">
    <p>Advantage</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="services">
    <p>Services</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="team">
    <p>Team</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="news">
    <p>News</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="contact">
    <p>Contact</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Her is a link to jsfiddle http://jsfiddle.net/BrentRansom/BEMr9/1/

Help needed!

Answer 1

Simple solution I had to change the a tag id to a different name. I had matching id's.