Animate Scroll to Anchor仅适用于First Link

Question

我在其他页面上使用了此脚本，由于某些原因，在此特定页面上，它只是为第一个链接添加了动画效果。 它是ID为#scroll多个页面上的子菜单。

这是脚本：

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

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

与下面的div我也希望subnav滚动：

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

与CSS冲突吗？ 如果有必要，我可以在这里放-只是无缘无故不要多余的代码！

Answer 1

ID是唯一的，而类可以多次使用，请将jQuery更改为：

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

以及与此相关的HTML：

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