23

我无法让 scrollTop() 方法同时在 Firefox 和 Chrome 中工作。但是我用过$('body, html').scrollTop();，它在 Chrome 中不起作用。仅$('body').scrollTop();适用于 Chrome。任何想法将不胜感激。下面是我的代码。

<!DOCTYPE html>
<html>
<head>
  <title>Demo</title>
  <style type="text/css">
  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;
  }
</style>
</head>

<body>
  <div id="light">
  </div>

<!-- Used the google jQuery link for ease of use in this example   -->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
  <script type="text/javascript">
    $(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});
        };
      });
    });
  </script>
</body>
</html>
4

7 回答 7

34

改用文档对象

$(document).scrollTop();
于 2013-09-13T04:05:40.250 回答
13

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

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

但是，为了使其正常工作，您的 body 和 html 元素不能height设置为100%. min-height改为使用

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

于 2013-12-17T15:30:17.530 回答
4

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

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

演示Here

于 2013-09-13T05:30:51.767 回答
2

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

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

或者只是贾斯汀的回答中提到的 $(document) 。

于 2013-09-13T04:20:05.967 回答
1

使用了这个解决方案：

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

在另一个线程的这个答案中提供： https ://stackoverflow.com/a/33462363

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

于 2017-10-12T07:49:11.727 回答
1

尝试使用 id 滚动元素的简单 javascript 代码

document.getElementById("id").scrollTop=0;
于 2017-10-12T08:56:47.953 回答
0

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

$('body, html').animate({
  scrollTop: $('#content ').offset().top
}, 1000);
于 2017-04-17T22:56:14.540 回答