JQuery+CSS实现【返回顶部】按钮，不需要图片
【返回顶部】按钮实现起来并不麻烦，有用图片实现的，有用FontAwesome实现的，效果都不错，但是都重了了些。这里我们用JQuery和CSS实现，相对更加轻量，代码也很简单，不需要加载额外的js文件。效果如下：
首先，在页面<body>标签内任何地方加上下面的HTML节点：
<ahref="#">›</a>
其次，在页面<head>标签内加上jquery文件，为方便，可以直接加载百度静态文件中的JQuery：
<scripttype="text/javascript"src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
然后，在页面<head>标签内加上下面的 Javascript脚本：
<scripttype="text/javascript">
(function($){
$(document).ready(function(){
//FadeInandOutwhenScroll
$(window).scroll(function(){
if($(this).scrollTop()>100){
$('.scrollup').fadeIn();
}else{
$('.scrollup').fadeOut();
}
});
//ScrolltoTop
$('.scrollup').click(function(){
$("html,body").animate({scrollTop:0},150);
returnfalse;
});
});
})(jQuery);
</script>
在页面<head>标签内加上下面的CSS样式：
<styletype="text/css">
/*ScrolltoTop*/
.scrollup{
display:none;
width:42px;
height:42px;
line-height:35px;
position:fixed;
bottom:5%;
right:5%;
color:#eee;
font-size:40px;
background:#929292;
text-align:center;
text-decoration:none;
transform:rotate(-90deg);/*旋转*/
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-o-transform:rotate(-90deg);
opacity:0.85;/*透明*/
filter:alpha(opacity=85);
/* writing-mode:tb-rl;*/
font-family:"HelveticaNeue","Helvetica","Arial";
}
.scrollup:hover,.scrollup:focus{
color:#eee;
text-decoration:none;
background:#5b5b5b;
}
</style>
使用的时候，可以按照具体需要调整。
- 要改变按钮大小，可以重新设置CSS中width和height的值，同时调整line-height与之对应，使向上箭头水平居中。说明：因为箭头使用 ›反转90度实现，所以line-height变为设置水平位置，text-align变为设置垂直居中。
- 要改变按钮位置，可以重新设置CSS中bottom和right的值。