Use jQuery to return to the top of the page

The icons at the top of the page are used to make it easier to preview the page. This function is also a common feature in the website. Today I have studied a simple example, use jQuery to return to the top: css code: * {margin: 0; padding: 0 ;}# backToTop {positi... syntaxHighlighter. a

The icons at the top of the page are used to make it easier to preview the page. This function is also a common feature in the website. Today I have studied a simple example, use jQuery to return to the top:

The css code is as follows:

* {Margin: 0; padding: 0 ;}
# BackToTop {position: fixed; bottom: 10px; left: 80px; _ position: absolute; _ left: 80px; _ bottom: auto ;}
# BackToTop a {text-align: center; text-decoration: none; color: # d1d1d1; display: block; width: 80px;-moz-transition: color 1 s;
-Webkit-transition: color 1 s;-o-transition: color 1 s; width: 18px; background: # 03F ;}
# BackToTop a: hover {color: #979797 ;}

The html code is as follows:

Back to Top

 

The jQuery code is as follows:

 

$ (Document). ready (function (){
Var backTop = $ ("# backToTop ")
BackTop. hide ();
$ (Function (){

$ (Window). scroll (function (){
If ($ (window). scrollTop ()> 100 ){
BackTop. fadeIn (1500 );

}
Else {
BackTop. fadeOut (1500 );
}
})
BackTop. click (function (){
$ ('Body, html '). animate ({scrollTop: 0}, 1000 );

})
})
})

Author: yilanyoumeng3