页面重新加载ScrollTop不起作用(可能的脚本冲突)

时间:2013-09-27 18:33:15

标签: jquery

我正在浏览此页http://dindita.com/preview.html

我添加了这个以使其在有人刷新页面时滚动到顶部但似乎无法正常工作,我想知道它是否与我正在使用的其他滚动脚本冲突。

<script type="text/javascript">
    $(document).ready(function(){
    $(this).scrollTop(0);
});
</script>

有任何线索吗?

P.s。:正在进行的工作:凌乱的脚本

5 个答案:

答案 0 :(得分:28)

试试这个:

$(document).ready(function() {
  $("html,body").animate({scrollTop: 0}, 100); //100ms for example
});

或者这个:

window.onload = function() {
 setTimeout (function () {
  scrollTo(0,0);
 }, 100); //100ms for example
}

或者这个:

$(window).on('beforeunload', function() {
    $(window).scrollTop(0); 
});

浏览器往往会在重新加载时跳回到最后一个滚动位置,这在许多情况下都很有意义。似乎这个自动跳转在onload事件之后立即被触发(但是我们不知道发生这种情况的确切时刻),因此使用一些延迟或者在页面重新加载之前将浏览器滚动到顶部是有意义的。 ;)

答案 1 :(得分:6)

浏览器(至少Chrome)会在页面加载后更改滚动位置,而不是在DOM准备就绪时。

$(window).load(function(){
    $('html, body').scrollTop(0);
});

如果这不起作用(在浏览器更改滚动位置之前仍然执行脚本),您可以设置超时:

$(window).load(function(){
    setTimeout(function() {
        $('html, body').scrollTop(0);
    }, 10);
});

答案 2 :(得分:3)

当我尝试这个时,我有了尤里卡时刻并且它起作用了:

<script> location.hash = (location.hash) ? location.hash : " "; </script>

在你的html的<head>中。关于单页应用程序不确定!但在常规页面中肯定会像魅力一样。

答案 3 :(得分:0)

这就是我提出的滚动到顶部的方法,但仅当文档尚未位于顶部时,并且延迟到足以不导致其正常触发的问题:

$(window).load(function() {
    setTimeout(function() {
        if ($(document).scrollTop() !== 0) $("html, body").animate({ scrollTop: 0 }, 'fast');
}, 300);
});

答案 4 :(得分:0)

调用scrollTo并再次使用计时器在10毫秒内滚动并更改1 px的值完成了这项工作。为每次强制刷新工作chrome和safari。

w = 200;

scrollTo(w - 1, 0);
window.setTimeout (function (){scrollTo(w, 0);}, 10);