CODEWITHSUNDEEP
javascriptjqueryhtml
rileychuggins
rileychuggins

Reputation: 79

Animate Scroll to Anchor only works for First Link

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!

Upvotes: 1

Views: 486

Answers (1)

ntzm
ntzm

Reputation: 4821

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>

Upvotes: 2

Related Questions