如何在不将页面滚动条重置为顶部的情况下使用 jQuery 为固定 div 设置动画

Posted 2023-05-08

【中文标题】如何在不将页面滚动条重置为顶部的情况下使用 jQuery 为固定 div 设置动画

【英文标题】：How to animate a fixed div with jQuery without page scrollbar resetting to top

【发布时间】：2013-01-22 05:11:48

【问题描述】：

第一次发帖，请善待;-)

我在页面正文中有一个固定的“菜单”div，大部分隐藏在“屏幕外”的右侧边距中，其初始顶部和右侧在 CSS 中设置为仅显示一个“句柄”。

div 可以滚动页面内容，并且我引入了 jQuery 的动画功能，以便在需要时将这个 div 滑出边缘并返回 - 当点击句柄时。这是一个简单的脚本，简化为...

var x = document.getElementById('menu');
if (x.style.right == '0px') 

        $j("#menu").animate(
            right:'-148px'
        );
     else 

        $j("#menu").animate(
            right:'0px'
        );
    

问题在于，每当此菜单 div 动画被触发为“打开”或“关闭”时，页面都会重置为顶部（其滚动条位置会重置）。我尝试添加代码来捕获和重置滚动条位置，但这会在页面上引入“闪烁”效果。

关于如何在不影响页面滚动位置的情况下触发动画的任何线索？

最好的，

基思..

【问题讨论】：

你能用jsfiddle.net复制这个吗？

【参考方案1】：

在点击事件末尾添加return false或将链接的href设置为href="javascript:void(0)"

【讨论】：

感谢 Panjkaj 的提示。该函数由链接 onClick 和 href='#' 调用，而不是 div 上的 jQuery click 函数。删除href很好地排序！最好的，基思..

对不起，我的评论中有轻微的错字 - 我的意思是重新定义 href 到建议的 javascript void 引用解决了这个问题。谢谢！

仅供参考，如果您有onClick，则可以像这样添加return false onClick="javascript line1;javascript line2;return false;"，然后您可以离开href="#"。如果你有像onClick="showMenu()" 这样的函数，那么在showMenu 函数体的最后一行添加return false。

再次感谢 Pankaj - 参考库的有用变体和 sn-ps！ :-)