30

Suppose we have a html page with large height.So there will be a vertical scrollbar.

As the user scrolls down I want to know how much he has scrolled using javascript (jquery) I suppose... Is this possible?

6 Answers 6

68

In pure javascript you can simply do like that:

window.onscroll = function (e) {
    console.log(window.scrollY); // Value of scroll Y in px
};

More infos (The Mozilla Developer Network) :

4
  • 6
    I am surprised that no one upvoted this. +1 from me ;)
    – Arjun
    Commented Jun 17, 2016 at 2:14
  • 1
    Do you need to unregister this somehow before exit as you do with removeEventListener?
    – Post Self
    Commented Jun 3, 2018 at 18:19
  • Wow!!! Mate you saved me in 2020!!! Thanks a lot!!!! You are a star!!
    – Tony
    Commented Nov 14, 2020 at 10:02
  • This was very helpful!! Commented Sep 12 at 9:58
26

You can do this using .scroll() and .scrollTop().

 $(window).scroll(function() {
     // use the value from $(window).scrollTop(); 
 });

See also this question.

0
6

This is what i used on my website... when anyone scrolls 620 pixels down the menu will pop up, I input the numbers manually. I'm still a noob at javascript but I hope this helps

    <script>
    $(document).ready(function(){
        $(window).scroll(function(){
            var scrollTop = 620;
            if($(window).scrollTop() >= scrollTop){
                $('.Nav').css({
                    position : 'fixed',
                    top : '0'
                });
            }
            if($(window).scrollTop() < scrollTop){
                $('.Nav').removeAttr('style');  
            }
        })
    })
    </script>
1
  • 3
    While this works, it could be improved, no need for the second if statement, just use an else. Also just removing the 'style' attribute could be dangerous if there is something else inline styled, perhaps by another js function. I think a better practice would be to reverse the style you added in the initial if
    – jakecraige
    Commented Aug 7, 2013 at 13:30
5

Yes. See scrollTop() in jQuery, which wraps the scrollTop DOM property.

0
3

You can use window.scrollX to detect how much pixels the user has scrolled right.
You can use window.scrollY to detect how much pixels the user has scrolled down.
You can use window.scrollTo(x, y); to set scroll pixels right (x) and down (y).


Example code:

var x = window.scrollX, y = window.scrollY;
window.scrollTo(0, 200);
0

This will work fine in chrome

window.addEventListener('scroll', function() {
    console.log(scrollY);
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.