我在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;*/
}
答案 0 :(得分：102)
尝试使用$("html,body").animate({ scrollTop: 0 }, "slow");
这对我来说很有用。
答案 1 :(得分：55)
如果您的CSS html元素具有以下overflow标记，则scrollTop将无效。
html {
overflow-x: hidden;
overflow-y: hidden;
}
要允许scrollTop滚动，请修改标记，从overflow元素中删除html标记，然后附加到body元素。
body {
overflow-x: hidden;
overflow-y: hidden;
}
答案 2 :(得分：14)
如果将scrollTop（）与'document'一起使用，它在两种浏览器中都有效：
$(document).scrollTop();
...而不是'html'或'body'。其他方式它在两种浏览器中都无法同时工作。
答案 3 :(得分：5)
我在Chrome，Firefox和Safari中成功使用了它。还没能在IE中测试它。
if($(document).scrollTop() !=0){
$('html, body').animate({ scrollTop: 0 }, 'fast');
}
“if”语句的原因是检查用户是否已在网站顶部准备就绪。如果是这样，请不要动画。这样我们就不用太担心屏幕分辨率了。
我使用$(document).scrollTop代替ie的原因。 $('html,body')导致Chrome因某种原因始终返回0。
答案 4 :(得分：2)
滚动身体并检查它是否有效：
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更有效，因为只使用了一个动画，而不是两个。因此，只有一次回调，而不是两次。
答案 5 :(得分：2)
我在使用chrome滚动时遇到了同样的问题。所以我从我的样式文件中删除了这行代码。
html{height:100%;}
body{height:100%;}
现在我可以使用滚动功能了：
var pos = 500;
$("html,body").animate({ scrollTop: pos }, "slow");
答案 6 :(得分：1)
也许你的意思是top: 0
$('a#gotop').click(function() {
$("html").animate({ top: 0 }, "slow", function() {
alert('Animation complete.'); });
//return false;
});
.animate（属性，[持续时间]，[缓和]，[回调]）
属性动画将朝向的CSS属性的地图。
...
或$(window).scrollTop()？
$('a#gotop').click(function() {
$("html").animate({ top: $(window).scrollTop() }, "slow", function() {
alert('Animation complete.'); });
//return false;
});
答案 7 :(得分：1)
// 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);
答案 8 :(得分：1)
我用：
var $scrollEl = $.browser.mozilla ? $('html') : $('body');
因为阅读jQuery scrollTop not working in Chrome but working in Firefox
答案 9 :(得分：0)
解决此问题的更好方法是使用如下函数：
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");）。
答案 10 :(得分：0)
在Chrome，Firefox和Edge上进行测试，唯一能正常使用的解决方案就是以这种方式使用setTimeout和Aaron的解决方案：
setTimeout( function () {
$('body, html').stop().animate({ scrollTop: 0 }, 100);
}, 500);
当我为Chrome浏览器和Edge重新加载页面时，没有其他任何解决方案重置了previuos scrollTop。 不幸的是，还有一点点＆＃34;轻弹＆＃34;在Edge。
答案 11 :(得分：0)
所以我也遇到了这个问题而且我写了这个函数：
/***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>
我希望对其他程序员有帮助。
答案 12 :(得分：0)
如果它对Mozilla一切正常，使用html，正文选择器，那么问题很可能与溢出有关，如果html或body中的溢出设置为auto，那么这将导致chrome不能正常工作，因为当它设置为自动时，动画上的scrollTop属性将无效，我不知道具体原因！但解决方案是省略溢出，不要设置它！那为我解决了！如果您将其设置为自动，请将其取下！
如果您将其设置为隐藏，则执行＆＃34; user2971963＆＃34;回答（ctrl + f找到它）。希望这很有用！
答案 13 :(得分：0)
$("html, body").animate({ scrollTop: 0 }, "slow");
这个CSS与滚动到顶部冲突所以要处理这个
html, body {
overflow-x: hidden;
}
答案 14 :(得分：0)
我发现我的 CSS 是问题所在。我从我的样式表中删除了它，它运行良好。
*{scroll-behavior: smooth;}
答案 15 :(得分：-1)
我认为scrollTop不是有效的属性。如果要为滚动设置动画，请尝试使用jquery的scrollTo插件