jQuery addClass 导致窗口在 Android 和 iPhone 上滚动回顶部

Posted 2023-05-07

【中文标题】jQuery addClass 导致窗口在 Android 和 iPhone 上滚动回顶部

【英文标题】：jQuery addClass cause window to scroll back to top on Android and iPhone

【发布时间】：2012-03-23 22:14:20

【问题描述】：

我正在处理一个页面，底部有一个元素，通过点击它来激活它。然后元素（立即）在高度上扩展以显示其内容。这是通过向该元素添加一个带有 jQ​​uery 的类（“.active”）来完成的。

.active 真正增加的是一个显示块和一些高度。但是，每次点击它时，浏览器都会跳回顶部。如果我注释掉 javascript 中的 addClass 部分，它的行为正常。

只是提醒一下，锚标记没有“href=#”。

【问题讨论】：

如果您尝试以不同的方式添加课程会怎样？比如 setattribute 左右

同样的事情发生了！我认为这可能是一些渲染问题。

您确认您的样式/类没有问题吗？如果您将该类静态分配给元素会发生什么？分配类并使用 css 属性动态显示/隐藏元素。它会产生相同的行为吗？

【参考方案1】：

作为临时修复，您可以在每次单击屏幕时将其放回原位..

$('.troublemaker').click(function(e)
   var currentScroll = $(document).scrollTop();
   setTimeout( function()  $(document).scrollTop( currentScroll ); , 10 );
);