Shulou(Shulou.com)06/03 Report--

This article mainly introduces javascript how to achieve the top of the window, the article introduces in great detail, has a certain reference value, interested friends must read it!

Javascript to achieve the top of the window: 1, create a front-end example file; 2, through getBoundingClientRect to obtain the distance from the top of the browser window; 3, use a loop to make the element on top.

This article operating environment: windows7 system, javascript1.8.5 version, Dell G3 computer.

How does javascript achieve window topping?

JavaScript realizes the function of setting the top.

There are many ways for JavaScript to achieve the top function, and I have used some before. I feel more complicated. I need something I have done recently, so I also found some information on the Internet. Finally, I found a method getBoundingClientRect () that can get the distance from the page element to the top of the browser window. The final code is as follows:

Let len = document.getElementById ('flexbox'). GetBoundingClientRect (). Top;// gets the distance from the element to the top of the browser window / / $(document) .scrollTop () is the height of the scroll bar for (let I = $(document). ScrollTop (); I < len + $(document). ScrollTop ()) {setTimeout (function () {window.scrollTo (0, I);}, 0)}

The main purpose of using a loop is to make the element unobtrusive when placed at the top, which can be achieved by changing iTunes +, and note that if the for statement uses var I instead of let I, the timer needs to execute the function wrapper immediately to ensure that I will take effect immediately.

The effect of setting the top in this way is similar to that of the anchor point, and if you want to achieve the floating top (some part is fixed on the top), you can consider using position:fixed to achieve it.

That's it.

The above is all the contents of the article "how to achieve window Top in javascript". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.