js gets the distance between the page element and the top of the browser workspace

This article mainly introduces the distance between the js acquisition page element and the top of the browser workspace. It has a certain reference value. Now I share it with you. Friends in need can refer to it.

First introduce a few Attributes: (Only IE and Firefox have been tested for the time being. In fact, chrome is what I use most in my work)

The height/width of the rolled-up web page (that is, after the browser scroll bar is scrolled) Hidden page content height)

(javascript) document.documentElement.scrollTop //firefox

(javascript) document.documentElement.scrollLeft //firefox

(javascript) document.body.scrollTop //IE

##(javascript) document.body.scrollLeft //IE

(jqurey)                                         $(window).scrollTop()  

##(jqurey)           $(window).scrollLeft()

The height and width of the web page working area

# (javascript)

document.documentElement.clientHeight// IE firefox

(jqurey)

$(window).height()

Element distance document Top and left offset values ​​

##(javascript)

DOM element object.offsetTop //IE firefox

(javascript)

DOM element object.offsetLeft //IE firefox

(jqurey)              

jq object.offset().top

(jqurey)                

jq Object.offset().left

Get the distance between the page element and the top of the browser working area

The distance between the page element and the top of the browser working area

= The distance between the element and the document Top offset value - The height of the rolled up web page

That is:

The distance between the page element and the top of the browser workspace

= DOM element object.offsetTop - document.documentElement.scrollTop Give an application example: (I am used to using jqurey to avoid compatibility worries)

Use the distance between the page element and the top/left end of the browser workspace to implement a prompt box to ensure the correct position of the prompt information at different locations on the page, as shown in the figure with code

It can be seen that no matter where the input box is, the prompt box information will always be displayed in the correct position and will not be blocked when the prompt box pops up

code ( The html page of the above example needs to quote jquery-1.8.2.min.js)

The above is the entire content of this article. I hope it will be helpful to everyone's learning. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

js method of obtaining the current domain name, Url, relative path and parameters and specifying parameters

js Native left swipe to delete

The above is the detailed content of js gets the distance between the page element and the top of the browser workspace. For more information, please follow other related articles on the PHP Chinese website!