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>