javascript - ScrollTop 在 Chrome/Safari 中不工作

标签 javascript jquery html google-chrome

我在我们的网站上有一个循环内的表单,当有人提交表单时,查询字符串会添加到 url,类似于“?updated=111”。然后我的 JQuery 脚本检查数字的 url,并在提交表单和重新加载页面后滚动到该 div。

此脚本在 Firefox 中运行良好,但在 Chrome 或 Safari 中运行不佳。例如,假设在我的页面上我有 25 个帖子,每个帖子都有其形式。假设我在 25 号帖子(最后一个)上提交了表单,然后当页面在 chrome 上重新加载时,窗口会滚动但不会一直滚动到 #div25 有时它可以工作(比如 1 -5)其他时候它只会滚动到半个窗口。

是否有一种故障安全方法来确保窗口在页面刷新后滚动到该 div?同样,以下内容在 Firefox 中有效,但在 Chrome 和 Safari 中仅部分有效。

<script>
jQuery(document).ready(function($) {

    if(window.location.href.indexOf("?updated=") > -1) {
        var postID = window.location.href.match(/\d+$/);
       $('html, body').animate({
            scrollTop: $('#post-'+postID).offset().top
        }, 'fast');
    }
});
</script>

另请注意,不确定这是否有帮助,但是一旦提交表单,如果我在页面上点击刷新,它就会滚动到正确的位置。不确定我是否应该添加延迟或加速动画来制作这个像在 FF 中一样跨浏览器工作?

最佳答案

尝试将“.animate()”方法置于 2 秒的超时内。问题消失了吗?如果是这样,那么它的时间问题。这很可能是因为浏览器尚未准备好滚动到您要求它滚动到的位置。

在这种情况下,您宁愿将超时设置为 0 而不是 2 秒。 0 超时只是在浏览器空闲时安排下一个周期的滚动。

喂!

关于javascript - ScrollTop 在 Chrome/Safari 中不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22025510/

相关文章:

javascript - 条形图标签不应进入条形图

javascript - ionic 不显示图像

javascript - 单击时调用自定义函数 (javascript/jquery)

jquery - 关闭 fancybox 后 CSS3 悬停动画失败

javascript - 自定义验证适用于服务器端,但不适用于客户端 asp mvc 5

javascript - jQuery.post() 数据不是 "posting"

javascript - 您好,我想让 4 个对象循环从左到右移动,但我的代码不起作用

javascript - Angular Js 中一个或多个实体的验证失败

javascript - 如何在 href javascript 函数中获取调用者元素?

html - 如何使用 Foundation 移动和替换下拉菜单中的箭头?