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>

Animate Scroll to Anchor仅适用于First Link

1 个答案: