页面跳转到顶部 jquery .animate答案

【问题标题】：Page jumps to top jquery .animate页面跳转到顶部 jquery .animate
【发布时间】：2012-10-16 05:21:59
【问题描述】：

我的问题是当我点击一个（固定位置）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;
    });
});

【问题讨论】：

尝试将间隔更改为 1500 而不是 100
在 hide() 和 show() 之后使用逗号而不是分号有什么特别的原因吗？
Susanth - 只是让 div 的动画变慢，页面仍然跳到顶部
mason81 我已将逗号更改为分号。如您所见，我是一名学习者:)
@Bondye 没关系 - return false; 会同时处理 preventDefault 和 stopPropagation...所以在这种情况下，如果在 return false; 上使用 evt.preventDefault()，则 evt.preventDefault() 是多余的结束。

标签： jquery jquery-animate scrollto

【解决方案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;
}

【讨论】：

感谢您的回答，触发器只是
October 2012
在文档准备就绪时为此 div 定义了点击事件。
好吧，对不起，但没有任何其他 html/css 标记，我无法真正了解发生了什么。考虑通过jsfiddle.net进行现场演示
gion，你是个传奇。我非常坚持这一点，认为这一定是我缺乏 javacript 知识让我退缩了！但实际上它是在 CSS 中——我永远不会拿起它！谢谢！！！

October 2012