Не удается заставить scrollTop() работать как в Chrome, так и в Firefox

У меня возникли проблемы с тем, что метод scrollTop() работает как в Firefox, так и в Chrome. Я использовал $('body, html').scrollTop();, однако он не работает в Chrome. В Chrome работает только $('body').scrollTop();. Любые мысли были бы весьма признательны. Ниже мой код.

<!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>

Ответы

Ответ 1

Вместо этого используйте объект документа

$(document).scrollTop();

Ответ 2

У меня была такая же проблема. Лучшим решением для меня было сделать это на window:

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

Чтобы это работало, ваши элементы body и html не могут иметь height, установленный в 100%. используйте min-height вместо

EDIT: элемент HTML может использовать height: 100%, но если вам нужно body растягиваться до полной высоты, вы должны использовать min-height: 100%. В противном случае scrollTop всегда возвращает "0"

Ответ 3

Попробуйте это, это прокрутка сверху с анимацией, которая считается более эффективной

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

Демо Here

Ответ 4

Вы используете несколько селекторов, и он вернет массив элементов DOM. Вызов функции getter этого массива кажется undefined в Chrome (функции setter должны работать)?

В любом случае вы можете использовать $('body').scrollTop() || $('html').scrollTop() в вашем случае.

Или просто $(документ), как указано в ответе Джастина.

Ответ 5

Удалить стиль высоты из тела, html-теги. Добавьте id в основной div под телом, например. #content затем используйте следующий script. Как указано ранее, запустите $(document).scrollTop(); в консоли браузера и убедитесь, что он возвращает значение не 0.

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

Ответ 6

Используется это решение:

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

Поставляется в этом ответе в другом потоке: fooobar.com/questions/262204/...

Вам не нужно включать jQuery, и он отлично работает для меня.

Ответ 7

попробуйте этот простой javascript-код для элемента прокрутки, используя id

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