How to write
【1】Anchor point
Using anchor links is a simple return to the top. This implementation mainly places an anchor link with a specified name at the top of the page, and then places a link to return to the anchor below the page. The user clicks the link to return to the top position where the anchor is located.
[Note] Detailed information about anchor points will be moved here
<body style="height:2000px;"><div id="topAnchor"></div><a href="#topAnchor" style="position:fixed;right:0;bottom:0">Back to top</a></body>
【2】scrollTop
The scrollTop property indicates the number of pixels hidden above the content area. When the element is not scrolled, the value of scrollTop is 0. If the element is scrolled vertically, the value of scrollTop is greater than 0, and indicates the pixel width of the invisible content above the element.
Since scrollTop is writable, scrollTop can be used to achieve the function back to the top
[Note] Details of the compatibility issues of scrollTop on the page are moved here
<body style="height:2000px;"><button id="test" style="position:fixed;right:0;bottom:0">Back to top</button><script>test.onclick = function(){document.body.scrollTop = document.documentElement.scrollTop = 0;}</script></body>【3】scrollTo()
scrollTo(x,y) method scrolls the document displayed in the current window, so that the points specified by coordinates x and y in the document are located in the upper left corner of the display area.
Set scrollTo(0,0) to achieve the effect of returning to the top
<body style="height:2000px;"><button id="test" style="position:fixed;right:0;bottom:0">Back to top</button><script>test.onclick = function(){scrollTo(0,0);}</script></body>【4】scrollBy()
scrollBy(x,y) method scrolls the document displayed in the current window, x and y specify the relative amount of scrolling
Just use the scroll length of the current page as a parameter and scroll in reverse, you can achieve the effect of returning to the top.
<body style="height:2000px;"><button id="test" style="position:fixed;right:0;bottom:0">Back to top</button><script>test.onclick = function(){var top = document.body.scrollTopTop || document.documentElement.scrollTopscrollBy(0,-top);}</script></body>【5】scrollIntoView()
Element.scrollIntoView method scrolls the current element and enters the visible area of the browser.
This method can accept a Boolean value as a parameter. If true, it means that the top of the element is aligned with the top of the visible part of the current area (provided that the current area is scrollable); if false, it means that the bottom of the element is aligned with the tail of the visible part of the current area (provided that the current area is scrollable). If this parameter is not provided, the default is true
The principle of using this method is similar to the principle of using anchor points. Set the target element at the top of the page. When the page scrolls, the target element is scrolled outside the page area. Click the Back to top button to return to the original position and achieve the expected effect.
<body style="height:2000px;"><div id="target"></div><button id="test" style="position:fixed;right:0;bottom:0">Back to top</button><script>test.onclick = function(){target.scrollIntoView();}</script></body>Enhanced
The following enhances the function back to the top
【1】Show enhancement
Use CSS to draw and turn "Back to Top" into a visual graphic (if compatible with IE8-browser, use pictures instead)
Use CSS pseudo-element and pseudo-hover effects. When the mouse moves to the element, the text back to the top is displayed, and it is not displayed when moved out.
<style>.box{position:fixed;right:10px;bottom: 10px;height:30px;width: 50px;text-align:center;padding-top:20px; background-color: lightblue;border-radius: 20%;overflow: hidden;}.box:hover:before{top:50%}.box:hover .box-in{visibility: hidden;}.box:before{position: absolute;top: -50%;left: 50%;transform: translate(-50%,-50%);content:'Back to top';width: 40px;color:peru;font-weight:bold;} .box-in{visibility: visible;display:inline-block;height:20px;width: 20px;border: 3px solid black;border-color: white transparent transparent white;transform:rotate(45deg);}</style><body style="height:2000px;"><div id="box"><div></div></div> </body>【2】Animation enhancement
To add animation to the top, the scroll bar rolls back to the top at a certain speed
There are two types of animations: one is CSS animation, which requires style changes and transition; the other is JavaScript animation, which uses a timer to implement it.
In the above 5 implementations, scrollTop, scrollTo() and scrollBy() methods can add animations, and since there is no style change, only javascript animations can be added
The timer can be used, setInterval, setTimeout and requestAnimationFrame. The following is to use the best-performing timer requestAnimationFrame to implement it.
[Note] IE9-Browser does not support this method, you can use setTimeout for compatibility
1. Add scrollTop animation effect
Using a timer, reduce the scrollTop value by 50 each time until it is reduced to 0, and the animation is finished
<script>var timer = null;box.onclick = function(){cancelAnimationFrame(timer);timer = requestAnimationFrame(function fn(){var oTop = document.body.scrollTop || document.documentElement.scrollTop;if(oTop > 0){document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;timer = requestAnimationFrame(fn);}else{cancelAnimationFrame(timer);} });}</script>2. Add scrollTo() animation effect
Get the y parameter in scrollTo(x,y) through the scrollTop value, reduce it by 50 each time until it is reduced to 0, and the animation is finished
<script>var timer = null;box.onclick = function(){cancelAnimationFrame(timer);timer = requestAnimationFrame(function fn(){var oTop = document.body.scrollTop || document.documentElement.scrollTop;if(oTop > 0){scrollTo(0,oTop-50);timer = requestAnimationFrame(fn);}else{cancelAnimationFrame(timer);} });}</script>3. Add scrollBy() animation effect
Set the y parameter in scrollBy(x,y) to -50 until scrollTop is 0, then the rollback stops
<script>var timer = null;box.onclick = function(){cancelAnimationFrame(timer);timer = requestAnimationFrame(function fn(){var oTop = document.body.scrollTop || document.documentElement.scrollTop;if(oTop > 0){scrollBy(0,-50);timer = requestAnimationFrame(fn);}else{cancelAnimationFrame(timer);} });}</script>accomplish
Since scrollTop, scrollBy() and scrollTo() methods all use whether the scrollTop value is reduced to 0 as a reference for animation stopping, and the principles and implementations of the three animations are basically similar, and the performance is also similar. Finally, the animation enhancement effect is achieved with the most commonly used scrollTop attribute
Of course, if you think the speed of 50 is not suitable, you can adjust it according to the actual situation
<style>.box{position:fixed;right:10px;bottom: 10px;height:30px;width: 50px;text-align:center;padding-top:20px; background-color: lightblue;border-radius: 20%;overflow: hidden;}.box:hover:before{top:50%}.box:hover .box-in{visibility: hidden;}.box:before{position: absolute;top: -50%;left: 50%;transform: translate(-50%,-50%);content:'Back to top';width: 40px;color:peru;font-weight:bold;} .box-in{visibility: visible;display:inline-block;height:20px;width: 20px;border: 3px solid black;border-color: white transparent transparent white;transform:rotate(45deg);}</style><body style="height:2000px;"><div id="box"><div></div></div> </body><script>var timer = null;box.onclick = function(){cancelAnimationFrame(timer);timer = requestAnimationFrame(function fn(){var oTop = document.body.scrollTop || document.documentElement.scrollTop;if(oTop > 0){document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;timer = requestAnimationFrame(fn);}else{cancelAnimationFrame(timer);} });}</script>The above is the full description of the five writing methods (from implementation to enhancement) based on JS implementation to you, which I introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message. The editor will reply you in time. Thank you very much for your support for Wulin.com website!