jquery implements a fade-back top button

The effect is as follows:

The HTML and CSS code for the button are as follows.

<id= "Gotop">    <class= "fa Fa-chevron-up "></i></div> 

I label <i class= "FA fa-chevron-up" ></i> use the font awesome,400 multiple icons (including QQ, Weibo) as long as 30KB, can be infinitely enlarged, do not need JS, very??。

The button gotop is fixed to the lower right corner of the screen and hidden.

#gotop{position:fixed; Right:10px;Bottom:12%;Z-index:666;Display:None;width:40px;Height:40px;font-size:30px;Line-height:40px;text-align:Center;Color:#fff;Background-color:#21759b;Border-radius:2px;cursor:Pointer;}#gotop: Hover{Background-color:#195a84;}

The JQ code is as follows, the upper part detects the scroll bar position display and hides the Gotop button, and the lower half clicks the button and then the sleek back to the top.

1$(function () {
2   //Save Gotop Button3   varGotop = $ ("#gotop");4   //detects scroll bar position, above 600 back top button display5$ (window). Scroll (function () {6 Console.log ($ (window). scrolltop ());7     if($ (window). scrolltop () > 600) {8Gotop.fadein (1000);9     }Ten     Else { OneGotop.fadeout (1000); A     } -   });
 -   //gotop button Click, rounded back to the top scrolltop:0 represents the time when the scrollbar 0,800 (MS) represents.  theGotop.click (function () { -$ (' body,html '). Animate ({scrolltop:0}, 800); -   });
 +});

No special effects of the button can see my blog in the lower right corner, the blog Park application JS permissions failed??。

jquery implements a fade-back top button