Jquery web page Back to Top Effect (icons fade away, self-write)

Well, come in for development. When there are too many webpages, you need a button to quickly return to the top, instead of rolling the pulley by yourself ~

It was originally difficult to say that the above header should be implemented in Javascript, which page reference and which page display.

As a result, Ben diaosi tried to write it. Well, I didn't find it. It's quite easy to say ~~

If there is a fart, I will be able to put it on the Code directly. If there is more fart, it will become a shit ~~ Oh, sin, Amitabha, amen ~~
Copy codeThe Code is as follows:
<Pre name = "code" class = "javascript"> // return to the top js
$ (Function (){
Var $ btn_top = $ ('<a id = "scrollTopBtn"> </a> ');
Export btn_top.css ({
'Display': 'none ',
'Width': '40px ',
'Height': '40px ',
'Position': 'fixed ',
'Right': '20px ',
'Bottom': '100px ',
'Z-Index': '123'
});
$ ("Body"). append ($ btn_top );
$ ("Body"). on ("click", "# scrollTopBtn", function (){
$ ("Html, body"). animate ({scrollTop: 0}, "slow ");
});
Var $ btn = $ ("# scrollTopBtn ");
If ($ (window). scrollTop ()> 100 ){
$ Btn. fadeIn (600 );
}
$ (Window). scroll (function (){
If ($ (window). scrollTop ()> 100 ){
$ Btn. fadeIn (600 );
} Else {
$ Btn. fadeOut (600 );
}
});
});

Find an image by yourself. Here I use the absolute path "css/web/images/scrollTop.png"

You can directly change the size of line 5 and line 6 to avoid adding cat labels on the page ~~ (> ^ ω ^ <) Meow ~~~

Save it as a js file and reference it directly ~~~