javascript - 动画滚动到 anchor 仅适用于第一个链接

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，我希望子导航也能滚动:

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