JQuery和Awesome实现炫酷【返回顶部】按钮
之前通过JQuery+纯CSS实现了返回顶部的功能，比较轻量级：JQuery+CSS实现【返回顶部】按钮，不需要图片。
现在我们再用JQuery+Awesome实现更炫酷的“返回顶部”按钮。
效果如下：
按钮的工作流程大致是：页面加载后按钮隐藏，向下拖动显现，鼠标悬浮时变色（颜色可以更改），点击返回顶部。
代码如下，复制成HTML文件保存即可看到效果。
<!DOCTYPEhtml>
<html>
<head>
<scriptsrc="//cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
<linkhref="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css"rel="stylesheet">
<scripttype="text/javascript">
(function($){
$(document).ready(function(){
$(window).scroll(function(){
if($(this).scrollTop()>100){
$('#back-top').addClass('show-totop');
}else{
$('#back-top').removeClass('show-totop');
}
});
$('#back-top').find('a').click(function(){
$('body,html').stop(false,false).animate({scrollTop:0},150);
returnfalse;
});
});
})(jQuery);
</script>
<style>
#back-top{
position:fixed;
visibility:hidden;
margin:020px20px0;
right:0;
bottom:-100px;
overflow:hidden;
z-index:99;
}
#back-top.show-totop{
visibility:visible;
bottom:0;
}
#back-top.mobile-back-top{
-webkit-transform:scale(0.7);
-ms-transform:scale(0.7);
-o-transform:scale(0.7);
transform:scale(0.7);
margin:02px1px0;
}
#back-topa{
background:#555555;
cursor:pointer;
}
#back-topa:hover{
background:#fcc300;
}
#back-topa{
display:block;
border-radius:50%;
width:50px;
height:50px;
text-align:center;
text-decoration:none;
color:#fff;
}
#back-topa:before{
content:'\f077';
font:25px/50pxFontAwesome;
}
</style>
</head>
<body>
<divid="back-top">
<ahref="#"title="BackToTop"></a>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>