2

我正在尝试为我的网站制作上滑动画。核心功能在那里，但我有一个问题，每当我点击一个元素（当页面不在顶部时）时，页面会跳转到顶部并返回然后使动画按预期进行。我最近几天研究过，但我的问题似乎很独特，所以我决定问这个问题。这就是我所拥有的：

<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（第一个、第二个、第三个）并由于导航栏而将其向上滚动，偏移量为 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>

问题如前所述。页面会非常快地跳转到页面顶部，然后返回到之前的位置。之后向上或向下滑动动画非常干净流畅。我真的不知道问题出在哪里。我希望有人能帮助我。提前致谢。

4

1 回答 1

0

你错过了一些右括号。

$(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，但是如果您曾经在 a 上执行此操作anchor，那很好用event.preventDefault();

于 2014-01-23T10:50:44.627 回答