Example of JavaScript implementation of return to top effect

In our development work,JavaScriptis an indispensable part. We often encounter code thatuses JavaScriptto return to the top. I believe that every page will have it. function, today I will give you a detailed introduction to the example of using JavaScript to achieve the return to the top effect!

Use native js to achieve a simple return to top effect. The requirements are relatively clear: 1. Show and hide buttons. 2. Trigger onscroll clearing again midwayTimer(Not implemented yet, hope you can enlighten me)

Code:

        
  按钮 
  
  

Summary:
1. The rendering order of dom stream, hover is written before a will take effect, otherwise it will be overwritten.

2. The use of various attribute methods and simple encapsulation.

3.getElementsByClassName returns nodelist, so use the form of array.

4. For compatibility issues under different browsers, abandon the dependency of the tab key and use two spaces instead.

5. Installation and use of emmet plug-in.

6. The animation provided by jq can more easily achieve the return to top effect. The anchor point method can also be used in certain situations. The problem is that some details will be displayed in the browser input field.

Related recommendations:

JS implementation Back to top Special effects

JS scroll event window.onscroll and position: fixed write a back to top component compatible with IE6

javascript - How to return the content of the iframe to the top outside the iframe

The above is the detailed content of Example of JavaScript implementation of return to top effect. For more information, please follow other related articles on the PHP Chinese website!