jQuery scrollTop 在 Chrome 中不工作但在 Firefox 中工作
Posted
技术标签:
【中文标题】jQuery scrollTop 在 Chrome 中不工作但在 Firefox 中工作【英文标题】：jQuery scrollTop not working in Chrome but working in Firefox 【发布时间】：2011-03-03 19:52:08 【问题描述】：我在 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;*/
【问题讨论】：
jsbin.com/erade/2 在 chrome 上运行良好 @jAndy，我想知道为什么scrollTop，它不是一个有效的 css 属性，在你的演示中工作？...你能分享一些关于它的信息或链接吗？
@Reigel：我不得不承认，我不能。我使用它很像一个黑盒，但 jQuery 实际上将它标准化为跨浏览器。
@jAndy - 好的...但我想在动画 css 地图属性中使用scrollTop 是不可取的...不过我仍在挖掘..
scrolltop with animate not working的可能重复
【参考方案1】：
尝试使用$("html,body").animate( scrollTop: 0 , "slow");
这在 chrome 中对我有用。
【讨论】：
是的。谢谢。简单又省时。 这有一个副作用：回调函数将被调用两次（每个元素一次）。任何聪明的解决方法，有人吗？ 放: if (this.nodeName == "BODY") return; 在回调函数的开头，因此只有来自 html 元素的回调才会通过。另外，请记住 html 元素上的 nodeName 属性始终是大写的。 感谢@Bobby 指出这一点！在使用一个应该触发一次并在所有浏览器上工作的回调函数时非常有用！助教！ 我必须使用 $("body,html") 在所有浏览器中工作。【参考方案2】：如果您的 CSS html 元素具有以下 overflow 标记，scrollTop 将不起作用。
html
overflow-x: hidden;
overflow-y: hidden;
要允许scrollTop 滚动，请修改您的标记，从html 元素中删除overflow 标记并附加到body 元素。
body
overflow-x: hidden;
overflow-y: hidden;
【讨论】：
它可能已经有 4 年多了，但它仍然是我的问题的解决方案 @Leandro 这是 chrome 41 中的解决方案。不要阻止回答问题的答案。 @Leandro 这家伙刚刚救了我的命！它对我有用 天哪，这为我解决了两个问题。非常感谢 我...花了 5 多个小时试图弄清楚为什么它不起作用。非常感谢您！【参考方案3】：如果您将 scrollTop() 与 'document' 一起使用，它在两种浏览器中都有效：
$(document).scrollTop();
...而不是'html'或'body'。否则它不会在两个浏览器中同时工作。
【讨论】：
当 'html' 和 'body' 不起作用时，文档对我有用。谢谢:)【参考方案4】：我已经在 Chrome、Firefox 和 Safari 中成功使用了它。还没能在IE中测试呢。
if($(document).scrollTop() !=0)
$('html, body').animate( scrollTop: 0 , 'fast');
“if”语句的原因是检查用户是否在站点顶部准备就绪。如果是这样，请不要制作动画。这样我们就不用太担心屏幕分辨率了。
我使用 $(document).scrollTop 而不是 ie 的原因。 $('html,body') 是因为 Chrome 出于某种原因总是返回 0。
【讨论】：
【参考方案5】：我在 chrome 中滚动时遇到了同样的问题。所以我从我的样式文件中删除了这行代码。
htmlheight:100%;
bodyheight:100%;
现在我可以玩滚动了，它可以工作了：
var pos = 500;
$("html,body").animate( scrollTop: pos , "slow");
【讨论】：
哇。这完全解决了我的问题！我根本无法让 scrollTop 工作，但是一旦我从 body 和 html 元素中删除了 height: 100% ，它就工作得很好。谢谢，谢谢，谢谢。 @agon024，我也很高兴；）。真的，我在几个小时的测试后建立了这个解决方案，并尝试在这里为像你这样的人写信。【参考方案6】：滚动正文并检查它是否有效：
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 更有效，因为只使用了一个动画，而不是两个。因此，只会触发一个回调，而不是两个。
【讨论】：
干得好！帮了我很多！【参考方案7】：也许你的意思是top: 0
$('a#gotop').click(function()
$("html").animate( top: 0 , "slow", function()
alert('Animation complete.'); );
//return false;
);
来自animate docs
.animate( properties, [ duration ], [ easing ], [ callback ] )properties 动画将朝其移动的 CSS 属性映射。 ...
或$(window).scrollTop()？
$('a#gotop').click(function()
$("html").animate( top: $(window).scrollTop() , "slow", function()
alert('Animation complete.'); );
//return false;
);
【讨论】：
动画仍然无法正常工作。找到了简单的解决方案。我不得不使用“body,html”或“html,body”而不仅仅是“html”。【参考方案8】：// 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);
【讨论】：
这种最佳方法绕过了 chrome 中overflow-x: hidden; 上 html 的问题。但是它不像.animate() 那样平滑滚动。【参考方案9】：
我用：
var $scrollEl = $.browser.mozilla ? $('html') : $('body');
因为阅读jQuery scrollTop not working in Chrome but working in Firefox
【讨论】：
【参考方案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");，则会发生这种情况）。
【讨论】：
【参考方案11】：在 Chrome、Firefox 和 Edge 上进行测试，唯一对我有用的解决方案是以这种方式将 setTimeout 与 Aaron 的解决方案一起使用：
setTimeout( function ()
$('body, html').stop().animate( scrollTop: 0 , 100);
, 500);
当我在 Chrome 和 Edge 中为我重新加载页面时，没有其他解决方案重置了之前的 scrollTop。 不幸的是，Edge 中仍有一点“轻弹”。
【讨论】：
【参考方案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*/)
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>希望对其他程序员有所帮助。
【讨论】：
【参考方案13】：如果 Mozilla 使用 html,body 选择器一切正常，那么问题很可能与溢出有关，如果 html 或 body 中的溢出设置为 auto，那么这将导致 chrome效果不好，因为当它设置为自动时，动画上的 scrollTop 属性将不起作用，我不知道为什么！但解决办法是省略溢出，不要设置！这为我解决了！如果您将其设置为自动，请将其关闭！
如果您将其设置为隐藏，则按照“user2971963”答案中的说明进行操作（ctrl+f 查找）。希望这有用！
【讨论】：
【参考方案14】： $("html, body").animate( scrollTop: 0 , "slow");
此 CSS 与滚动到顶部发生冲突，因此请注意这一点
html, body
overflow-x: hidden;
【讨论】：
【参考方案15】：我发现我的 CSS 是问题所在。我从我的样式表中删除了它，它工作正常。
*scroll-behavior: smooth;
【讨论】：
【参考方案16】：我不认为 scrollTop 是一个有效的属性。如果要动画滚动，请尝试 jquery 的 scrollTo 插件
http://plugins.jquery.com/project/ScrollTo
【讨论】：
我什么时候说 scrollTop() 是一个属性？您不需要使用插件，因为此功能已在 jQuery 中实现。 @Bayan - 您删除的答案将有答案When did I say scrollTop() is a property?，此外，OP 想要一个流畅的动画，scrollTop() 可以做到流畅吗？...值得注意的是，上面的 Ben 的回答清楚地说明了, I don't think the scrollTop is a valid property 你评论为scrollTop() is valid jQuery...
@Maju 很公平。很高兴看到你的问题得到了解决:)
@Reigel ScrollTop 平滑得很好：jsfiddle.net/JohnnyWalkerDesign/w4hetv45以上是关于jQuery scrollTop 在 Chrome 中不工作但在 Firefox 中工作的主要内容，如果未能解决你的问题，请参考以下文章
jQuery中animate()方法以及$('body').animate({"scrollTop":top})不被Firefox支持问题的解决
jquery 动画 scrollTop 在 ie 或 firefox 中不起作用
jQuery offset()函数 和 scrollTop()函数
jQuery中animate()的方法以及$("body").animate({"scrollTop":top})不被Firefox支持问题的解决