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>
scrollTop is deprecated in strict mode.
$(selector).scrollTop(position) Parameter. Description. position. Specifies the vertical scrollbar position in pixels.
scrollTop property gets or sets the number of pixels that an element's content is scrolled vertically. An element's scrollTop value is a measurement of the distance from the element's top to its topmost visible content. When an element's content does not generate a vertical scrollbar, then its scrollTop value is 0 .
scrollTo only works when the scroll behavior is set on html . If you have set overflow: scroll on some container inside of the DOM, then that need to be accessed. Assign an id to that. For example I have below div container for which I have set overflow: scroll .
Use the document object instead
$(document).scrollTop();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With