JQuery和Awesome实现炫酷【返回顶部】按钮
之前通过JQuery+纯CSS实现了返回顶部的功能，比较轻量级：JQuery+CSS实现【返回顶部】按钮，不需要图片。
现在我们再用JQuery+Awesome实现更炫酷的“返回顶部”按钮。
效果如下：
按钮的工作流程大致是：页面加载后按钮隐藏，向下拖动显现，鼠标悬浮时变色（颜色可以更改），点击返回顶部。
代码如下，复制成HTML文件保存即可看到效果。
<!DOCTYPE html>
<html>
<head>
<script src="//cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
<link href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<script type="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);
return false;
});
});
})(jQuery);
</script>
<style>
#back-top {
position: fixed;
visibility: hidden;
margin: 0 20px 20px 0;
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: 0 2px 1px 0;
}
#back-top a {
background: #555555;
cursor: pointer;
}
#back-top a:hover {
background: #fcc300;
}
#back-top a {
display: block;
border-radius: 50%;
width: 50px;
height: 50px;
text-align: center;
text-decoration: none;
color: #fff;
}
#back-top a:before {
content: '\f077';
font: 25px/50px FontAwesome;
}
</style>
</head>
<body>
<div id="back-top">
<a href="#" title="Back To Top"></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>
上一篇： JS实现表格列宽拖动
下一篇： PHP读取文件内容并排序输出
这个号 ，用户体验好