Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/86.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript jQuery页面在执行动画之前跳到顶部_Javascript_Jquery_Scroll_Page Jump - Fatal编程技术网

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

Javascript jQuery页面在执行动画之前跳到顶部,javascript,jquery,scroll,page-jump,Javascript,Jquery,Scroll,Page Jump,我正在尝试为我的网站制作一个向上滑动的动画。核心功能在那里,但我有一个问题,每当我点击一个元素(当页面不在顶部时),页面就会跳转到顶部和背面,然后按照预期制作动画。我已经研究了过去几天,但我的问题似乎是独特的,所以我决定问这个问题。这就是我得到的: <div class="content"> <div class="inner_content"> <div id="first" class="first"></div>

我正在尝试为我的网站制作一个向上滑动的动画。核心功能在那里,但我有一个问题,每当我点击一个元素(当页面不在顶部时),页面就会跳转到顶部和背面,然后按照预期制作动画。我已经研究了过去几天,但我的问题似乎是独特的,所以我决定问这个问题。这就是我得到的:

<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像素的偏移量向上滚动它。这是我的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>

$(“div.first”)。单击(函数(){
$(“html,body”).animate({
“scrollTop”:$(“div.first”).offset().top-130
}, 500);
$(“div.second”)。单击(函数(){
$(“html,body”).animate({
“scrollTop”:$(“div.first”).offset().top-130
}, 500);
$(“div.third”)。单击(函数(){
$(“html,body”).animate({
“scrollTop”:$(“div.first”).offset().top-130
}, 500);
问题如前所述。页面快速跳转到页面顶部,然后返回到上一个位置。之后,向上或向下滑动的动画非常干净平滑。我真的不知道问题出在哪里。我希望任何人都能帮助我。
提前感谢。

您错过了一些结束括号

$(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上触发了动画,但是如果您在
锚点上执行此操作,最好使用
event.preventDefault()

看起来你的大括号/方括号在末尾缺少了一些。这本身就可以正常工作。你的实际代码中一定有其他东西。你有一个
@JamesMontagne
吗你有一个href为#?
的小括号。这正是重点。非常感谢。我两天前自己发现了,但是广告没有访问互联网来标记此问题已解决。无论如何,谢谢。