Return To Top JavaScript demo

It's common to find a return to top arrow at the right bottom side of the website. I'll create a demo to illustrate  how to do it using css3 and JavaScript. 

demo show

Coding now...

html

Here I use the icon from awesome Fonts , so you should link the js file in the dead tag. 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" style="text/css" rel="stylesheet">  

css main

css general

In the style part, key point is that making the outer tag as position:fixed and the inner tag as position:relative.  
Then, the top icon should be displayed none firstly and shown through JavaScript code. 

js

First, insert JQ file to active JavaScript. Then, the code should be two parts: when scroll the page larger than 50, show up, vice  versa. 
when click the back to top button, scroll to top with animation. 

Demo Download https://pan.baidu.com/s/1nvRbgN3