Implementation principle and code of the function similar to the CSDN Blog return to the top of the page

Comments: The function of returning to the top of the page with a similar CSDN Blog is modified only in two places: Return speed --> changed to slowly go back, return the time when the top icon appears --> changed to display as long as it is not on the top. The specific code is as follows. If you are interested, you can refer to the following:
, The returned speed --> is changed to slowly returning. (It turns out to be a flash and returns)
, Return the time when the top icon appears --> changed to show as long as it is not on the top. (It turns out to be displayed after PX scrolling down)

Note: javascript must be written after Html;
HTML

The Code is as follows:
<Div id = "d-top" style = "display: none;">
<A id = "d-top-a" href = "#" title = "Back to top">
</a>
</Div>

Javascript code

The Code is as follows:
<Script type = "text/javascript">
$ (Function (){
Var d_top = $ ('# d-top ');
Document. onscroll = function (){
Var scrTop = (document. body. scrollTop | document.doc umentElement. scrollTop );
If (scrTop & gt; 500 ){
If (scrTop> 0 ){
D_top.show ();
} Else {
D_top.hide ();
}
}
$ ('# D-top-a'). click (function (){
$ ("Html, body"). animate ({scrollTop: 0}, 500 );
// ScrollTo (0, 0 );
This. blur ();
Return false;
});
});
</Script>

CSS style

The Code is as follows:
# D-top {
Position: fixed;
Float: right;
Z-index: 10;
Right: 10px;
Bottom: 40px;
}
# D-top img {
Width: 42px;
Opacity: 0.3;
}
Img {
Border: medium none;
}