jQuery - 改变宽度使页面跳转到顶部答案

【问题标题】：jQuery - Changing width makes the page jump to the topjQuery - 改变宽度使页面跳转到顶部
【发布时间】：2015-09-17 17:56:03
【问题描述】：

我试图让这个导航侧边栏在鼠标离开一段时间后滑开，使文本部分展开。问题是，每当滑动功能启动时，页面就会跳到顶部。没有使用“#”，我试过overflow-y：滚动，函数末尾返回false，preventDefault，但没有任何效果。

这是js代码

$(document).ready(function(){
    $("#navbar").delay(5000).animate({left: "-=15%"});
    $("#navwrap").css("width","2%").css("position","fixed");
    $("#bodywrap").delay(5000).animate({width: "90%"});

    $("#navbar").mouseleave(function(){
        $(this).stop(true, true).delay(3000).animate({left: "-=15%"});
        $("#bodywrap").delay(3000).animate({width: "90%"});
        $("#navwrap").css("width","2%").css("position","fixed");
    });

    $("#navwrap").mouseenter(function(){
        $("#navbar").stop(true,false);
        $("#bodywrap").stop(true,false);
        if ($("#navbar").css("left") != "0%"){
            $("#navbar").animate({left: "0%"});
            $(this).css("width","15%").css("position","initial");
            $("#bodywrap").animate({width: "75%"});
        };
    });
});

这是小提琴：http://jsfiddle.net/uuw2dzry/1/

【问题讨论】：

您的示例在 chrome 中不会跳到顶部。它似乎工作正常
在 Firefox 中跳到顶部。
它跳到 Chrome 的顶部。问题在于 $("#bodywrap") 的动画。也许您可以在动画之前获取滚动位置，并且不仅为宽度设置动画，还为 scrollTop 设置动画。但我自己在你的小提琴上没有运气。

标签： javascript jquery html css page-jump

【解决方案1】：

大部分动画和延迟都可以由CSS完成

http://jsfiddle.net/fkL57v9d/

您的代码过于复杂，并为错误和不良结果留下了空间。
我会考虑以更简单的方式重新创建此页面。

【讨论】：

是的，我还不太习惯 javascript，有很多复杂的代码，因为我暂时想不出更简单的方法，很高兴它终于可以继续思考了关于它，非常感谢！ :)