Implemented using jquery. Pictures used:
1, try scrolling this page to the bottom can appear go2top button.
2, Go2top-inner temporarily unused.
HTML&JS definition:
Copy Code code as follows:
<a id= "Go2top" class= "Go2top" href= "#header" ><span class= "Go2top-inner" ></span></a>
<script type= "Text/javascript" >
$ (function () {
$ (' #go2top '). Click (function () {
$ ("Html,body"). Animate ({scrolltop:0},200);
return false;
});
$ (window). Scroll (function () {
var obj=$ (' #go2top ');
if (Obj.offset (). top>900) {
Obj.show ();
}else{
Obj.hide ();
}
});
});
</script>
CSS definition
Copy Code code as follows:
. go2top {
Background:url ("Http://images.cnitblog.com/blog/84698/201303/28125209-67653841b1114531a2a1e6db63315d63.png") No-repeat scroll left top transparent;
bottom:65px;
Color: #444444;
Display:none;
height:50px;
margin-left:510px;
position:fixed;
right:160px;
Text-align:center;
width:50px;
}
. go2top:hover {
Background-position: -50px top;
}
Try, is not have to return to the top, very convenient and practical functions, I hope you can enjoy.