无法使scrollTop（）在Chrome和Firefox中都能正常运行

我无法使scrollTop（）方法在Firefox和Chrome中都能正常工作。 我用$('body, html').scrollTop(); 但是，它在Chrome中不起作用。 只有$('body').scrollTop(); 适用于Chrome。 任何想法将不胜感激。 以下是我的代码。

      body { height: 2000px; } #light { display: block; position: fixed; top: 50%; left: 50%; margin-left: -400px; margin-top: -200px; width: 800px; height: 400px; background-color: blue; z-index:1002; overflow: auto; }    
 
    $(document).ready(function() { $(window).scroll(function () { var offset = $('body, html').scrollTop(); var view = $(window).height(); var total = $(document).height(); var percent = 1-(offset / (total - view)); var widthFactor = 800*percent; var marginFactor = -(400*percent) if(percent > 0.33){ $("#light").css({ "width" : widthFactor, "margin-left" : marginFactor}); }; }); });    

Answer 1

请改用文档对象

 $(document).scrollTop(); 

Answer 2

我有同样的问题。 对我来说最好的解决方案是在window ：

 var offset = $(window).scrollTop(); 

为了使其工作，您的body和html元素的height不能设置为100% 。 使用min-height代替

编辑： HTML元素可以使用height: 100% ，但是如果您需要将body拉伸到最大高度，则必须使用min-height: 100% 。 否则scrollTop总是返回“0”

Answer 3

试试这个，这是滚动顶部动画，看起来更有效

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

Here演示

Answer 4

您使用多个选择器，它将返回一个DOM元素数组。 调用此数组的getter函数似乎在Chrome中未定义（setter函数应该可以工作）？

无论如何你可以使用$('body').scrollTop() || $('html').scrollTop() 在你的情况下$('body').scrollTop() || $('html').scrollTop() 。

或者只是贾斯汀回答中提到的$（文件）。

Answer 5

使用此解决方案：

window.scrollY || window.pageYOffset || document.body.scrollTop + (document.documentElement && document.documentElement.scrollTop || 0)

在另一个post中提供了这个答案： https ： //stackoverflow.com/a/33462363

你不需要涉及jQuery，它对我来说很好。

Answer 6

从body，html标签中删除高度样式。 将id添加到body下的主div，例如#content，然后使用以下脚本。 如前所述，运行$(document).scrollTop(); 在浏览器控制台中，确保它返回的值不是0。

 $('body, html').animate({ scrollTop: $('#content ').offset().top }, 1000); 

Answer 7

尝试使用id滚动元素的这个简单的JavaScript代码

 document.getElementById("id").scrollTop=0;