jQuery的scrollTop不工作在Chrome中，但在Firefox中工作
我在jQuery中使用了scrollTop函数来导航到顶端，但奇怪的是，“平滑的animation滚动”在Safari和Chrome（滚动没有平滑的animation）停止工作后，我做了一些改变。
但在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;*/ }
尝试使用$("html,body").animate({ scrollTop: 0 }, "slow");
这在Chrome中适用于我。
如果您的CSS html元素具有以下overflow标记，则scrollTop将不起作用。
html { overflow-x: hidden; overflow-y: hidden; }
要允许scrollTop滚动，请修改标记从html元素中移除overflow标记并附加到body元素。
body { overflow-x: hidden; overflow-y: hidden; }
它适用于两个浏览器，如果您使用scrollTop（）与“文档”：
$(document).scrollTop();
…而不是“html”或“body”。 其他方式在两个浏览器中不能同时工作。
我已经在Chrome，Firefox和Safari中成功地使用了它。 还没有能够在IE中testing它。
if($(document).scrollTop() !=0){ $('html, body').animate({ scrollTop: 0 }, 'fast'); }
“if”语句的原因是检查用户是否已经准备好在网站的顶部。 如果是这样，不要做animation。 这样我们就不用担心屏幕分辨率了。
我使用$(document).scrollTop而不是ie的原因。 $('html,body')是因为某些原因，Chrome始终返回0。
滚动正文，并检查它是否工作：
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更有效率$("html, body").animate因为只使用了一个animation，而不是两个。 因此，只有一个callback触发，而不是两个。
我在Chrome浏览器中遇到同样的问题。 所以我从我的样式文件中删除了这行代码。
html{height:100%;} body{height:100%;}
现在我可以玩滚动和它的作品：
var pos = 500; $("html,body").animate({ scrollTop: pos }, "slow");
也许你的意思是top: 0
$('a#gotop').click(function() { $("html").animate({ top: 0 }, "slow", function() { alert('Animation complete.'); }); //return false; });
从有生命的文件
.animate（ 属性 ，[duration]，[easing]，[callback]）
属性animation将移向的CSS 属性的映射。
…
或者$(window).scrollTop() ？
$('a#gotop').click(function() { $("html").animate({ top: $(window).scrollTop() }, "slow", function() { alert('Animation complete.'); }); //return false; });
// 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将id滚动到您的视口中（因为您无论如何都滚动到顶部，这可能只是您的外部div）：
document.getElementById('wrapperIDhere').scrollIntoView(true);
我用：
var $scrollEl = $.browser.mozilla ? $('html') : $('body');
因为阅读jQuery的scrollTop不工作在Chrome浏览器，但在Firefox的工作
解决这个问题的一个更好的方法是使用这样的函数：
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");会发生什么情况$("html,body").animate({ scrollTop: 0 }, "slow"); ）。
在Chrome，Firefox和Edge上进行testing，对我来说工作正常的唯一解决scheme是通过以下方式使用Aaron解决scheme的setTimeout：
setTimeout( function () { $('body, html').stop().animate({ scrollTop: 0 }, 100); }, 500);
没有其他的解决scheme重新设置previuos的scrollTop，当我重新加载页面，在Chrome和边缘我。 不幸的是Edge还是有一些“轻弹”。
所以我也有这个问题，我已经写了这个function：
/***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*/){ var contener = $("#"+elmId), contenerJS = document.getElementById(elmId); if(contener.length !== 0){ var elmFullHeight = contener.height()+ parseInt(contener.css("padding-top").slice(0,-2))+ parseInt(contener.css("padding-bottom").slice(0,-2)), SC_scrollTop = contenerJS.scrollTop, SC_max_scrollHeight = contenerJS.scrollHeight-elmFullHeight; if(SC_scrollTop >= SC_max_scrollHeight - tillElementEnd){ $("#"+elmId).unbind("scroll"); $.post(ajaxLink,postParameterObject) .done(function(data){ if(data.length != 0){ $("#"+elmId).append(data); $("#"+elmId).scroll(function (){ fuweco_reloaderMore(elmId,ajaxLink,postParameterObject); }); } }); } } } /***Working function for ajax loading End*******************/ /***Sample function Start***********************************/ function reloaderMore(elementId) { var contener = $("#"+elementId), contenerJS = document.getElementById(elementId) ; if(contener.length !== 0){ var elmFullHeight = contener.height()+(parseInt(contener.css("padding-top").slice(0,-2))+parseInt(contener.css("padding-bottom").slice(0,-2))), SC_scrollTop = contenerJS.scrollTop, SC_max_scrollHeight = contenerJS.scrollHeight-elmFullHeight ; if(SC_scrollTop >= SC_max_scrollHeight - 200){ $("#"+elementId).unbind("scroll"); $("#"+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. 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>'); $("#"+elementId).delay(300).scroll(function (){reloaderMore(elementId);}); } } } /***Sample function End*************************************/ /***Sample function Use Start*******************************/ $(document).ready(function(){ $("#t1").scrollTop(0).scroll(function (){ 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> <div class="reloader" id="t1"> <div id="elm1" style="margin-bottom:15px;"> <h1>Some text for header.</h1> <p> Some text for content.<br> Some text for content.<br> Some text for content.<br> Some text for content.<br> Some text for content.<br> Some text for content.<br> Some text for content.<br> Some text for content.<br> Some text for content.<br> Some text for content.<br> Some text for content.<br> Some text for content.<br> </p> </div> <div id="elm2" style="margin-bottom:15px;"> <h1>Some text for header.</h1> <p> Some text for content.<br> Some text for content.<br> Some text for content.<br> Some text for content.<br> Some text for content.<br> Some text for content.<br> Some text for content.<br> Some text for content.<br> Some text for content.<br> Some text for content.<br> Some text for content.<br> Some text for content.<br> </p> </div> <div id="elm3" style="margin-bottom:15px;"> <h1>Some text for header.</h1> <p> Some text for content.<br> Some text for content.<br> Some text for content.<br> Some text for content.<br> Some text for content.<br> Some text for content.<br> Some text for content.<br> Some text for content.<br> Some text for content.<br> Some text for content.<br> Some text for content.<br> Some text for content.<br> </p> </div> </div>
如果Mozilla使用html，body selector，那么这个问题与溢出有关，如果html或body中的溢出设置为auto，那么这会导致chrome不能正常工作，因为它被设置为auto时，scrollTop属性在animation中将不起作用，我不知道为什么！ 但解决方法是省略溢出，不要设置它！ 为我解决了它！ 如果您将其设置为自动，请将其取下！
如果您将其设置为隐藏，则按照“user2971963”中的描述回答（ctrl + f查找它）。 希望这是有用的！
$("html, body").animate({ scrollTop: 0 }, "slow");
这个CSS与滚动到顶部冲突，所以照顾这一点
html, body { overflow-x: hidden; }
我不认为scrollTop是一个有效的属性。 如果你想animation滚动，请尝试scrollTo插件的jQuery
