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

This article mainly explains "how to use javascript to achieve the top", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "how to use javascript to achieve top" bar!

Javascript realizes the method of setting the top: 1. Get the distance from the element to the top of the browser window through getBoundingClientRect; 2. Through "$(document). ScrollTop () for (...)" Methods the function of setting the top can be realized.

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

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.

Thank you for your reading, the above is the content of "how to use javascript to achieve the top". After the study of this article, I believe you have a deeper understanding of how to use javascript to achieve the top, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.