event.pageX get mouse position
Description: The mouse position relative to the left edge of the document.
Example
1 <script>
2 $(document).on( "mousemove", function( event ) {
3 console.log( "pageX: " + event.pageX + ", pageY: " + event.pageY );
4 });
5 </script>
.offset() get offset position of an element
Description: Get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document.
Example(get)
1 <script>
2 var p = $(element);
3 var offset = p.offset();
4 p.html( "left: " + offset.left + ", top: " + offset.top );
5 </script>
Example(set)
1 <script>
2 // the parameter must be PlainObject
3 var coord = {top: 50, left: 100};
4 $(element).offset(coord);
5 </script>
.position() get the relative Position of an element
Description: Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.
Note: this method does not accept any arguments.
Example
1 <script>
2 var p = $(element);
3 var position = p.position();
4 console.log( "left: " + position.left + ", top: " + position.top );
5 </script>
Description: Get the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element.
Example(get)
1 <script>
2 var p = $(element);
3 console.log( "scrollTop:" + p.scrollTop() );
4 </script>
Example(set)
1 <script>
2 var topValue = 500;
3 $(element).scrollTop(topValue);
4 </script>
The difference between screenX/Y, clientX/Y and pageX/Y
- pageX/Y gives the coordinates relative to the
<html>element in CSS pixels. - clientX/Y gives the coordinates relative to the
viewportin CSS pixels. - screenX/Y gives the coordinates relative to the
screenin device pixels.
Example
1 <script>
2 document.addEventListener('click', function(e) {
3 console.log(
4 'page: ' + e.pageX + ',' + e.pageY,
5 'client: ' + e.clientX + ',' + e.clientY,
6 'screen: ' + e.screenX + ',' + e.screenY)
7 });
8 </script>
A picture explaining the difference between pageY and clientY:
jQuery Scroll to bottom of page/iframe
1 <script>
2 $('html, body').animate({
3 scrollTop: $(document).height()-$(window).height()},
4 2000
5 );
6 </script>
Composite example
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <title>Demo</title>
7 </head>
8 <body style="height:1000px;">
9 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
10 <div id="A" style="left:100px;"> Default <br /> mouse<br/>position </div>
11 <div id="B" style="left:300px;"> offset() <br /> mouse<br/>position </div>
12 <div id="C" style="left:500px;"> position() <br /> mouse<br/>position </div>
13 <div id="D" style="left:700px;"> client <br /> mouse<br/>position </div>
14 </body>
15 <style>
16 #A,#B,#C,#D {
17 width: 100px;
18 height: 100px;
19 cursor: pointer;
20 background: #2f2f2f;
21 position: absolute;
22 top: 50px;
23 color: #fff;
24 font: bold 15px Arial;
25 }
26 </style>
27 <script>
28 $(document).ready(function (e) {
29 // pageX
30 $('#A').click(function (e) {
31 console.log(e.pageX + ' , ' + e.pageY);
32 });
33 // offset()
34 $('#B').click(function (e) {
35 var posX = $(this).offset().left,
36 posY = $(this).offset().top;
37 console.log((e.pageX - posX) + ' , ' + (e.pageY - posY));
38 });
39 // position
40 $('#C').click(function (e) {
41 var posX = $(this).position().left,
42 posY = $(this).position().top;
43 console.log((e.pageX - posX) + ' , ' + (e.pageY - posY));
44 });
45 // client offset scroll
46 $('#D').click(function (e) {
47 var offset_t = $(this).offset().top - $(window).scrollTop();
48 var offset_l = $(this).offset().left - $(window).scrollLeft();
49 var left = Math.round( (e.clientX - offset_l) );
50 var top = Math.round( (e.clientY - offset_t) );
51 console.log("Left: " + offset_t + " Top: " + offset_l);
52 });
53 });
54 </script>
55 </body>
56 </html>