jQuery | event.pageY property with examples

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

Recommended Posts: