24

I am having trouble getting the scrollTop() method to work in both Firefox and Chrome. I used $('body, html').scrollTop(); however, it doesn't work in Chrome. Only $('body').scrollTop(); works in Chrome. Any thoughts would be greatly appreciated. Below is my code.

<!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>
Jonny Cerveza
  • 243
  • 1
  • 2
  • 6

7 Answers7

34

Use the document object instead

$(document).scrollTop();
Dustin Blake
  • 579
  • 5
  • 10
  • 2
    I wish there was a way to flag SO answers as 'archaic and irrelevant', because the top google result sent me on a wild goosechase, turned out it was because it was from 2010. THIS is the answer that people need. – Nathan Hornby Mar 27 '14 at 10:04
  • I'm curious how this works, since the document itself has no `scrollTp` property or any information on it's scroll position – vsync Aug 24 '14 at 10:49
  • 3
    This worked for me. Small side comment. If you use animate() to scroll the document you need to use $("html, body"). – Danielle May 06 '15 at 12:41
13

I had this same issue. Best solution for me was to do it on window:

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

In order for this to work though, your body and html elements can't have a height set to 100%. use min-height instead

EDIT: the HTML element can use height: 100%, however if you need the body to stretch to full height you have to use min-height: 100% instead. Otherwise the scrollTop always returns "0"

DoubleA
  • 1,636
  • 14
  • 28
4

Try this, this is scroll on top with animation which is seen more effective

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

Demo Here

S. S. Rawat
  • 5,943
  • 4
  • 43
  • 59
  • this won't work when html or body overflow is set to auto. what you can do is create a container div and animate that. – Andrew Jun 21 '15 at 06:42
2

You use multiple selector and it will return an array of DOM elements. Calling getter function of this array seems undefined in Chrome (setter functions should work)?

Anyway you can use $('body').scrollTop() || $('html').scrollTop() in you case.

Or just $(document) as mentioned in Justin's answer.

mrmoment
  • 727
  • 2
  • 10
  • 34
1

Used this solution:

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

Supplied in this answer in another thread: https://stackoverflow.com/a/33462363

You don't need to involve jQuery and it works fine for me.

Anders
  • 37
  • 1
  • 6
1

try this simple javascript code for scroll element using id 

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

Remove height style from the body,html tags. Add an id to the main div under body e.g. #content then use following script. As previously quoted run $(document).scrollTop(); in the browser console and make sure it returns a value not 0.

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