How to get the number of pixels a user has scrolled down the page?

Question

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?

score 63 · Answer 1 · answered Nov 29 '15 at 03:23

63

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) :

answered Nov 29 '15 at 03:23

Fabien Sa

9,135
4
37
44

5

I am surprised that no one upvoted this. +1 from me ;) – Arjun Jun 17 '16 at 02:14
1

Do you need to unregister this somehow before exit as you do with `removeEventListener`? – Post Self Jun 03 '18 at 18:19
Wow!!! Mate you saved me in 2020!!! Thanks a lot!!!! You are a star!! – Tony Nov 14 '20 at 10:02

score 26 · Accepted Answer · edited May 23 '17 at 11:46

26

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

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

See also this question.

edited May 23 '17 at 11:46

Community

1
1

answered Nov 02 '10 at 18:49

justkt

14,610
8
42
62

score 6 · Answer 3 · edited Jun 22 '16 at 05:56

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>

edited Jun 22 '16 at 05:56

T J

42,762
13
83
138

answered May 14 '13 at 11:38

Four.Twenty

51
1
4

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 Aug 07 '13 at 13:30

score 5 · Answer 4 · answered Nov 02 '10 at 18:49

5

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

answered Nov 02 '10 at 18:49

Frédéric Hamidi

258,201
41
486
479

score 3 · Answer 5 · answered Jun 02 '21 at 08:21

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);

score 0 · Answer 6 · edited Feb 11 '22 at 00:47

0

This will work fine in chrome

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

edited Feb 11 '22 at 00:47

Super Kai - Kazuya Ito

22,221
10
124
129

answered Feb 10 '22 at 18:20

Umesh Mahajan

13
10

How to get the number of pixels a user has scrolled down the page?

6 Answers6

Linked