Question

我的问题是，当我点击一个（固定位置）div来为另一个div设置动画时，整个页面会跳转到顶部。我试过preventDefault并返回false，但似乎没有什么可以解决这个问题！请帮忙。

这是脚本

$(document).ready(function(){

    $("#close").click(function(){
        $("#info").animate({ 
            width: "0",
            height:"0"
        }, 100 );

        $("#info").hide(),
        $(".container").animate({ 
            left:"0",
            width:"100%"
        }, 100 );
        return false;
    });

    $(".sidebar").click(function(evt){
        evt.preventDefault();
        $("#info").show(),
        $("#info").animate({ 
            width: "25%",
            height:"100%",
            left:"0"
        }, 100 );

        $(".container").animate({ 
            left: "25%",
            width:"75%"
            }, 100 );
        return false;
    });
});

Answer 1

如果触发元素是空锚

<a href="#">some val</a>

然后点击后位置哈希变为“＃”。通过找不到与空哈希对应的区域，浏览器将页面滚动到顶部这是你可以做的：

$('a[href=#]').on('click', function(e){
     e.preventDefault();
 });

或者你可以像10年前那样做：将空锚点href更改为空的javascript语句：

<a href="javascript:void();">some val</a>

<强>更新
看完标记后，我得到了解决方案。您所要做的就是确保.container能够滚动。在制作动画时，元素会获得css属性overflow : hidden（我真的不知道它从何处获取）以及那种重置你的滚动位置。因此，您所要做的就是将其添加到样式表中：

.container{
    overflow: auto !important;
}

页面跳转到顶部jquery .animate

1 个答案: