jQuery | event.pageY property with examples

Last Updated : 23 May, 2019

The event.pageY is an inbuilt property in jQuery which is used to find the position of the mouse pointer relative to the top edge of the document..
Syntax:

event.pageY

Parameter: It does not accept any parameter because it is a property not a function.
Return Value: It returns the position of the mouse pointer relative to the top edge of the document.
jQuery code to show the working of event.pageY property:
Code #1:
In the below code, bottom left position of the mouse-pointer is getting displayed.

<html>
  
<head>
    <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script>
        <!-- jQuery code o demonstrate the x-coordinate of mouse pointer -->
        $(document).ready(function() {
            $(document).mousemove(function(event) {
                $("span").text(event.pageY);
            });
        });
    </script>
</head>
  
<body>
    <!-- bottom left position of the pointer will show here -->
    <p>Y co-ordinate position of the mouse-pointer is : <span></span></p>
</body>
  
</html>

Output:

Code #2:
In the below code, top left corner position of the mouse-pointer is getting displayed.

<html>
  
<head>
    <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script>
        <!-- jQuery code to demonstrate the mouse pointer position -->
        $(document).ready(function() {
            $(document).mousemove(function(event) {
                $("span").text(event.pageY);
            });
        });
    </script>
</head>
  
<body>
    <!-- top left position of the pointer will show here -->
    <p>Y co-ordinate position of the mouse-pointer is : <span></span></p>
</body>
  
</html>

Output:

My Personal Notes

Related Articles