jQuery页面在执行动画之前跳到顶部

Question

我正在尝试为我的网站制作一个幻灯片动画。顶部）页面跳到顶部和后背，然后按预期制作动画。我已经研究了最后几天，但是我的问题似乎是独一无二的，所以我决定问这个问题。这就是我得到的：

<div class="content">
    <div class="inner_content">
        <div id="first" class="first"></div>
        <div id="second" class="second"></div>
        <div id="third" class="third"></div>
    </div>
</div>

这个想法是单击一个Div（第一，第二，第三个），并由于NavigationBar而以130 PX的偏移滚动。这是我的jQuery：

<script>
    $( "div.first").click(function(){
        $("html, body").animate({
            "scrollTop": $("div.first").offset().top -130 
        }, 500);
        $( "div.second").click(function(){
            $("html, body").animate({
                "scrollTop": $("div.first").offset().top -130 
            }, 500);
            $( "div.third").click(function(){
                $("html, body").animate({
                    "scrollTop": $("div.first").offset().top -130 
                }, 500);
</script>

问题是所说的。页面跳到页面顶部，然后返回到上一个位置。之后，向上或向下滑动动画非常干净和光滑。我真的不知道问题在哪里。我希望任何人都能帮助我。预先感谢。

Answer 1

您错过了一些结束括号。

$(document).ready(function () {
    $("div.first").click(function () {
        $("html, body").animate({
            "scrollTop": $("div.first").offset().top - 130
        }, 500);
    });
    $("div.second").click(function () {
        $("html, body").animate({
            "scrollTop": $("div.first").offset().top - 130
        }, 500);
    });
    $("div.third").click(function () {
        $("html, body").animate({
            "scrollTop": $("div.first").offset().top - 130
        }, 500);
    });
});

另外，我确实注意到您在div.click上触发了动画，但是如果您在anchor上执行此操作，那么使用event.preventDefault();