ScrollTop无法在Chrome / Safari中使用 [英] ScrollTop not working in Chrome/Safari

查看:122
本文介绍了ScrollTop无法在Chrome / Safari中使用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I have a form within a loop on our site and when someone submits the form then a query string is added to the url something like "?updated=111". Then my JQuery script checks the url for the number and scrolls to that div once the form is submitted and page reloads.

这个脚本在Firefox中工作正常,但没有在Chrome或Safari中也可以工作。例如,在我的页面上说我有25个帖子,每个帖子都有它的形式。比方说,我提交表单上的邮政编号25(最后一个),然后当页面重新加载铬窗口滚动,但不是所有的方式#div25有时它的作品(像1 -5)其他时间它只会滚动到一半的窗口。

This script is working fine in Firefox but doesn't work as well in Chrome or Safari. For example, say on my page I have 25 posts, and each posts has its form. Lets say I submit the form on post number 25 (the last one) then when the page reloads on chrome the window scrolls but not all the way to #div25 sometimes it works ( for like 1 -5) other times it will only scroll to half the window.

是否有一个失败的安全方法来确保窗口将在页面刷新后滚动到该div?再次,下面在Firefox中工作,但只在Chrome和Safari中有效。

Is there a fail safe way to make sure the window will scroll to that div after the page refreshes? Again, the below does work in Firefox but only partially works in Chrome and 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?

Also side note, not sure if this helps but once the form is submitted if I hit refresh on the page then it scrolls to the correct location.. Not sure if I should add a delay or speed up the animation to make this work cross browser like it does in FF?

推荐答案

尝试将.animate()方法放在2秒的超时内。问题是否消失?如果是这样,那么它的时间问题。最有可能的是因为浏览器还没有准备好滚动到你要求它滚动到的位置。

Try putting the ".animate()" method inside a timeout of 2seconds. Does the problem go away? If it does, then its timing issue. Most likely thats because the browser is not ready to scroll to the location that you ask it to scroll to.

在这种情况下,你宁愿去超时0比2秒。只要浏览器空闲,0超时就会为下一个周期安排滚动。

In this situation, you'd rather go with a timeout of 0 than a 2 sec. A 0 timeout just schedules the scroll for next cycle whenever the browser is free.

HTH!

这篇关于ScrollTop无法在Chrome / Safari中使用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆