JavaScript implementation back to top effects

Source: Internet
Author: User

When the page is very long, users want to go back to the top of the page, you must scroll several times to scroll to the top, if the lower right corner of the page has a "back to the Top" button, the user clicks, you can go back to the top, for users, is a better experience.

Html:

?

1 <input id= "btn1" type= "button" value= "Back to Top"/>

Css:

?

1 #btn1 {position:fixed;bottom:10px;right:10px;}

Js:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24-25 Window.onload=funcition () {var Obtn=document.getelementbyid ("btn"); var timer=null;//Declare a variable to see if it is a system or user scrolling var sbys= True Window.onscroll=funcition () {if (!sbys) {clearinterval (timer);} Sbys=false;} obtn.onclick=funcition () {timer = SetInterval (Funcition () {//Get scrolltop var scrolltop=document.documentelement.scrolltop| | Document.body.scrollTop; When the Click button returns to the top, compute the buffer speed of Var ispeed=math.floor (-SCROLLTOP/8); if (scrolltop==0) {clearinterval (timer)} sbys=true; Document.documentelement.scrolltop=document.body.scrolltop=scrolltop+ispeed; },30)}}

Knowledge Points:

1. Calculate the speed (buffer) to take down the whole

2. Need to clear timer when scrolltop==0

3. Need to determine whether the user or JS operation of the scroll bar, if it is user action to clear the timer

The above mentioned is the entire content of this article, I hope you can enjoy.

        Note < : More Wonderful tutorials please focus on the triple Programming

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.