Get top of element from the screen jquery năm 2024

Last update on August 19 2022 21:51:35 (UTC/GMT +8 hours)

jQuery Practical exercise Part - I : Exercise-26

Find the absolute position of an element using jQuery.

Sample Solution:

HTML Code :

  
  
  
  
  
  
  
  
  
  
First name:
  
  

  
Last name:
  
  


  
  
  
  
  

JavaScript Code:

var left_position = $("
# name2").offset().left - $(document).scrollTop();  
console.log('Left: '+left_position);
var top_position = $("
# name2").offset().top - $(document).scrollTop();  
console.log('Right: '+top_position);  

See the Pen jquery-practical-exercise-26 by w3resource (@w3resource) on CodePen.

Contribute your code and comments through Disqus.

Previous: Access form input fields using jQuery. Next: Convert a jQuery object into a string.

In order to get the location of an element relative to the document, jQuery offset() method is used. The offset() method is an inbuilt method in jQuery which is used to set or returns the offset coordinates of the selected element. We can also use the jQuery position() method. The position() method is an inbuilt method in jQuery which is used to find the position of the first matched element relative to its parent element in the DOM tree. Syntax:

$(selector).offset()

Below examples illustrate the above approach: Example 1:

< html >

< head >

< `0> `

`2 `3

`2 `5

`2 `7

`9 0> `

< <`4> `

`2<`7

<`8<`9

` `2`html`1

` `2`html`3

`<`8`html`5

` `2`html`1

`9<4> `

< > `4 > 5> `6

`9> 4> `

`9`head >

< <`5> `

< <`9`head`0<9> `

< `head`5`head`6

` `2`head`8

`2> 0> 1> `2

`2> `4

`9`head`5> `

< > `1 2> 1> `

< `7 ``8 9<0> `

`2< <4 > 5> `6

`9 7> `

< > `1 2> 1> `

< `09 10 9 12 13 09> `

< `18 19 18> `

< > `4> `

`2 `27

<`8 `29

`30 `31

`30 `33

`34 `35

<`8 `37

`2 `37

`9> 4> `

`9<5> `

`9`html >

Output:

< html >

< head >

< `0> `

`2 `3

`2 `64

`2 `7

`9 0> `

< <`4> `

`2<`7

<`8<`9

` `2`html`1

` `2`html`3

`<`8`html`5

` `2`html`1

`9<4> `

< > `4 > 5> `6

`9> 4> `

`9`head >

< <`5> `

< <`9`head`0<9> `

< `head`5`head`6

` `2`head`8

`2> 0> 1> `2

`2> `4

`9`head`5> `

< > `1 2> 1> `

< `7 ``8 9<0> `

`2< <4 > 5> `6

`9 7> `

< > `1 2> 1> `

< `09 10 9 12 13 09> `

< `18 19 18> `

< > `4> `

`2 `27

<`8<`78

`30<`80

`30<`82

`30<`84

<`8 `37

`2 `37

`9> 4> `

`9<5> `

`9`html >

Output:

Last Updated : 18 Mar, 2020

Like Article

Save Article

Share your thoughts in the comments

Please Login to comment...

How to get top position of element in JavaScript?

JavaScript offsetTop Property It returns the top position in pixels, relative to the top of the parent element. It includes the top position, and margin of the element and the top padding, scrollbar, and border of its parent element.

How do you scroll to the top of the page in jQuery?

In jQuery, the scrollTo() method is used to set or return the vertical scrollbar position for a selected element. This behavior can be used to scroll to the top of the page by applying this method on the window property. Setting the position parameter to 0 scrolls the page to the top.

How to get element position on screen JavaScript?

Getting the Position DataCalling getBoundingClientRect() on an element will return data about its size and position relative to the viewport. The data is wrapped in a DOMRect object that provides the element's x and y positions in the viewport, and its width and height .

How do you jump to the top of the page in JavaScript?

scrollTo() window. scrollTo(0, 0) is a sure bet to scroll the window (or any other element) back to the top. The scrolling behavior of that is determined by CSS as well.