Animate Scroll to Anchor仅适用于First Link

Question

I've used this script on other pages and for some reason on this particular page it is only animating the first link. It is a submenu on multiple pages with the id of #scroll .

Here is the script:

$("#scroll").click(function(event){     
    event.preventDefault();
    $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});

and here is the html:

<ul>
    <li><a id="scroll" href="#one">Academy</a></li>
    <li><a id="scroll" href="#two">School</a></li>
    <li><a id="scroll" href="#three">School 2</a></li>
    <li><a id="scroll" href="#four">High School</a></li>

</ul>

with div's below that I want the subnav to scroll too:

<div id="one">Lorem Ipsum is simply dummy text.</div>
<div id="two">Lorem Ipsum is simply dummy text.</div>
<div id="three">Lorem Ipsum is simply dummy text.</div>
<div id="four">Lorem Ipsum is simply dummy text.</div>

Could it be conflicts with CSS? I can put up here if necessary - just don't want the excess code for no reason!

Answer 1

IDs are meant to be unique, whereas classes can be used multiple times, change the jQuery to this:

$(".scroll").click(function(event){     
    event.preventDefault();
    $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});

and the HTML to this:

<ul>
    <li><a class="scroll" href="#one">Academy</a></li>
    <li><a class="scroll" href="#two">School</a></li>
    <li><a class="scroll" href="#three">School 2</a></li>
    <li><a class="scroll" href="#four">High School</a></li>
</ul>