jQuery scrollTop不在Chrome中工作，但在Firefox中工作

Question

我在jQuery中使用scrollTop函数导航到顶部，但奇怪的是，“平滑的动画滚动”在Safari和Chrome中停止工作（滚动时没有平滑的动画）变化。

但它仍然在Firefox中顺利运行。什么可能是错的？

这里是jQuery的功能我用，

的jQuery：

$('a#gotop').click(function() { 
    $("html").animate({ scrollTop: 0 }, "slow"); 
    //alert('Animation complete.'); 
    //return false; 
}); 

HTML

<a id="gotop" href="#">Go Top </a> 

CSS

#gotop { 
     cursor: pointer; 
     position: relative; 
     float: right; 
     right: 20px; 
     /*top:0px;*/ 
} 

Answer 1

尝试使用$("html,body").animate({ scrollTop: 0 }, "slow");

这铬为我工作。

Answer 2

我不认为scrollTop的是有效的财产。如果你想动画滚动，尝试scrollTo jQuery插件

http://plugins.jquery.com/project/ScrollTo

Answer 3

也许你的意思是top: 0

$('a#gotop').click(function() { 
    $("html").animate({ top: 0 }, "slow", function() { 
              alert('Animation complete.'); }); 
    //return false; 
}); 

从animate docs

.animate（性能，[长]，[easing]，[callback]）
属性动画将移向的CSS属性的映射。
...

或$(window).scrollTop()？

$('a#gotop').click(function() { 
    $("html").animate({ top: $(window).scrollTop() }, "slow", function() { 
                   alert('Animation complete.'); }); 
    //return false; 
}); 

Answer 4

我已经在Chrome，Firefox和Safari中成功使用了它。还没有能够在IE中测试它。

if($(document).scrollTop() !=0){ 
    $('html, body').animate({ scrollTop: 0 }, 'fast'); 
} 

“if”语句的原因是检查用户是否已准备好位于网站的顶部。如果是这样，不要做动画。这样我们就不必担心屏幕分辨率。

我使用$(document).scrollTop而不是ie的原因。 $('html,body')是因为某些原因，Chrome始终返回0。

$(document).scrollTop(); 

...而不是 'HTML' 或 '体'：

Answer 5

如果使用scrollTop的（）的 '文件' 它工作在这两个浏览器。其他方式在两个浏览器中都不能同时工作。

Answer 6

// if we are not already in top then see if browser needs html or body as selector 
var obj = $('html').scrollTop() !== 0 ? 'html' : 'body'; 

// then proper delegate using on, with following line: 
$(obj).animate({ scrollTop: 0 }, "slow"); 

，但最好的办法是只使用原生API（因为你滚动到顶部反正这可能只是你的外层div）滚动一个id为您的视口：

document.getElementById('wrapperIDhere').scrollIntoView(true); 

Answer 7

我用：

var $scrollEl = $.browser.mozilla ? $('html') : $('body'); 

因为读jQuery scrollTop not working in Chrome but working in Firefox

Answer 8

滚动体和检查它是否工作：

function getScrollableRoot() { 
    var body = document.body; 
    var prev = body.scrollTop; 
    body.scrollTop++; 
    if (body.scrollTop === prev) { 
     return document.documentElement; 
    } else { 
     body.scrollTop--; 
     return body; 
    } 
} 


$(getScrollableRoot()).animate({ scrollTop: 0 }, "slow"); 

这比$("html, body").animate效率更高，因为只使用一个动画，而不是两个。因此，只有一个回调触发，而不是两个。

Answer 9

如果您的CSS html元素具有以下overflow标记，scrollTop将不起作用。

html { 
    overflow-x: hidden; 
    overflow-y: hidden; 
} 

为了让scrollTop滚动，修改您的标记从html元素中删除overflow标记，并追加到body元素。

body { 
    overflow-x: hidden; 
    overflow-y: hidden; 
} 

Answer 10

一个更好的办法来解决这个问题是使用这样的功能：

function scrollToTop(callback, q) { 

    if ($('html').scrollTop()) { 
     $('html').animate({ scrollTop: 0 }, function() { 
      console.log('html scroll'); 
      callback(q) 
     }); 
     return; 
    } 

    if ($('body').scrollTop()) { 
     $('body').animate({ scrollTop: 0 }, function() { 
      console.log('body scroll'); 
      callback(q) 
     }); 
     return; 
    } 

    callback(q); 
} 

这将在所有浏览器上运行，并阻止Firefox中，从两次向上滚动（这是如果你使用会发生什么接受的答案 - $("html,body").animate({ scrollTop: 0 }, "slow");）。

Answer 11

测试在Chrome，Firefox和边缘，只有与艾伦以这种方式解决工作得很好，我正在使用的setTimeout的解决方案：

setTimeout(function() { 
    $('body, html').stop().animate({ scrollTop: 0 }, 100); 
}, 500); 

其他解决方案没有一个重置了的previuos scrollTop的，当我重新加载页面时，在我的Chrome和Edge中。 不幸的是Edge还是有一些“轻弹”。

Answer 12

所以我也有这个问题，我写了这个功能：

/***Working function for ajax loading Start*****************/ 
 
function fuweco_loadMoreContent(elmId/*element ID without #*/,ajaxLink/*php file path*/,postParameterObject/*post parameters list as JS object with properties (new Object())*/,tillElementEnd/*point of scroll when must be started loading from AJAX*/){ 
 
\t var \t 
 
\t \t contener = $("#"+elmId), 
 
\t \t contenerJS = document.getElementById(elmId); 
 
\t if(contener.length !== 0){ 
 
\t \t var \t 
 
\t \t \t elmFullHeight = 
 
\t \t \t \t contener.height()+ 
 
\t \t \t \t parseInt(contener.css("padding-top").slice(0,-2))+ 
 
\t \t \t \t parseInt(contener.css("padding-bottom").slice(0,-2)), 
 
\t \t \t SC_scrollTop = contenerJS.scrollTop, 
 
\t \t \t SC_max_scrollHeight = contenerJS.scrollHeight-elmFullHeight; 
 
\t \t if(SC_scrollTop >= SC_max_scrollHeight - tillElementEnd){ 
 
\t \t \t $("#"+elmId).unbind("scroll"); 
 
\t \t \t $.post(ajaxLink,postParameterObject) 
 
\t \t \t .done(function(data){ 
 
\t \t \t \t if(data.length != 0){ 
 
\t \t \t \t \t $("#"+elmId).append(data); 
 
\t \t \t \t \t $("#"+elmId).scroll(function(){ 
 
\t \t \t \t \t \t fuweco_reloaderMore(elmId,ajaxLink,postParameterObject); 
 
\t \t \t \t \t }); 
 
\t \t \t \t } 
 
\t \t \t }); 
 
\t \t } 
 
\t } 
 
} 
 
/***Working function for ajax loading End*******************/ 
 
/***Sample function Start***********************************/ 
 
function reloaderMore(elementId) { 
 
\t var 
 
\t \t contener = $("#"+elementId), 
 
\t \t contenerJS = document.getElementById(elementId) 
 
\t ; 
 

 
    if(contener.length !== 0){ 
 
    \t var 
 
\t \t \t elmFullHeight = contener.height()+(parseInt(contener.css("padding-top").slice(0,-2))+parseInt(contener.css("padding-bottom").slice(0,-2))), 
 
\t \t \t SC_scrollTop = contenerJS.scrollTop, 
 
\t \t \t SC_max_scrollHeight = contenerJS.scrollHeight-elmFullHeight 
 
\t \t ; 
 
\t \t if(SC_scrollTop >= SC_max_scrollHeight - 200){ 
 
\t \t \t $("#"+elementId).unbind("scroll"); 
 
\t \t \t $("#"+elementId).append('<div id="elm1" style="margin-bottom:15px;"><h1>Was loaded</h1><p>Some text for content. Some text for content. Some text for content. \t Some text for content. Some text for content. Some text for content. Some text for content. Some text for content. Some text for content. Some text for content. Some text for content. Some text for content.</p></div>'); 
 
\t \t \t $("#"+elementId).delay(300).scroll(function(){reloaderMore(elementId);}); 
 
\t \t } 
 
    } 
 
} 
 
/***Sample function End*************************************/ 
 
/***Sample function Use Start*******************************/ 
 
$(document).ready(function(){ 
 
\t $("#t1").scrollTop(0).scroll(function(){ 
 
\t \t reloaderMore("t1"); 
 
    }); 
 
}); 
 
/***Sample function Use End*********************************/

.reloader { 
 
    border: solid 1px red; 
 
    overflow: auto; 
 
    overflow-x: hidden; 
 
    min-height: 400px; 
 
    max-height: 400px; 
 
    min-width: 400px; 
 
    max-width: 400px; 
 
    height: 400px; 
 
    width: 400px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
\t <div class="reloader" id="t1"> 
 
\t \t <div id="elm1" style="margin-bottom:15px;"> 
 
\t \t \t <h1>Some text for header.</h1> 
 
\t \t \t <p> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t </p> 
 
\t \t </div> 
 
\t \t <div id="elm2" style="margin-bottom:15px;"> 
 
\t \t \t <h1>Some text for header.</h1> 
 
\t \t \t <p> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t </p> 
 
\t \t </div> 
 
\t \t <div id="elm3" style="margin-bottom:15px;"> 
 
\t \t \t <h1>Some text for header.</h1> 
 
\t \t \t <p> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t \t Some text for content.<br> 
 
\t \t \t </p> 
 
\t \t </div> \t \t 
 
\t </div>

我希望这将是有益的其他程序员。

Answer 13

我在滚动chrome时遇到了同样的问题。所以我删除这行代码从我的风格文件。

html{height:100%;} 
body{height:100%;} 

现在我可以用滚动播放，它的工作原理：

var pos = 500; 
$("html,body").animate({ scrollTop: pos }, "slow"); 

Answer 14

如果它工作的所有罚款为Mozilla，与HTML，机身选择，然后有一个很好的机会，问题是有关溢出，如果在html或body中的溢出设置为auto，那么这会导致chrome不能正常工作，因为它被设置为auto时，scrollTop属性在动画中将不起作用，我不知道为什么！但解决方案是省略溢出，不要设置它！为我解决了它！如果您将其设置为自动，请将其取下！

如果您将其设置为隐藏状态，则按照“user2971963”回答（按Ctrl + F查找它）所述执行操作。希望这是有用的！

Answer 15

$("html, body").animate({ scrollTop: 0 }, "slow"); 

这与滚动到顶部，以便利用这个

html, body { 
     overflow-x: hidden;   
    }