1.说明：本次效果为滚动离页面顶部一段距离后，页面右下角出现一个小箭头，点击其后即可回到页面顶部
2.小箭头来源：使用了font awesome的箭头图标
3.若不求效果的话，那么可以之引入JQuery文件，小箭头就不使用，而是用“回到顶部”替代
4.HTML内容
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../css/font-awesome.css"><script src="../js/jquery.min.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<!--保证小箭头的位置固定在页面右下角，且给小箭头设置背景颜色和其本身的颜色-->
<style type="text/css">
#back-to-top1{
position:fixed;
bottom:20px;
right:20px;
width:20px;
display:none;
border:1px solid #f4645f;
background: #f4645f;
color:#fff;
}
</style>
<body style="height:2000px">
<a href="#top" id="back-to-top1"><i class="fa fa-chevron-up fa-lg"></i></a>
<script type="text/javascript">
$(document).bind('scroll',function(){
var len = $(this).scrollTop();
if(len >= 100){
$("#back-to-top1").show();
}else{
$("#back-to-top1").hide();
}
});
$("#back-to-top1").click(function(e){
e.preventDefault();
$('body').animate({scrollTop:0},1000);
});
</script>
</body>
因篇幅问题不能全部显示，请点此查看更多更全内容