JQuery 网页如何快速的滚动到顶部？现如今，页面元素不断丰富，就导致页面的纵深比较广，那么用户一旦阅读网页到了底部，就会产生一个快速滚动到顶部的需求，当然了，很多网页都这样实现了。

 

一、效果图

 

文档的右下侧出现一个向上滚动的按钮，鼠标点击后，就可快速的滚动的文档顶部。

 

二、实现方法
 

①、准备材料

你可以到该资源库jquery scrollUp下载，也可以到其官网下载。

 

②、导入文件

<link type="text/css" rel="stylesheet" href="${ctx}/components/awesome/css/font-awesome.min.css" />

<script type="text/javascript" src="${ctx}/components/scrollup/jquery.scrollUp.min.js"></script>

 

font-awesome作为scrollup的必需品。

 

③、设置scrollup的样式

// 启用scroll up

$(function() {

    $.scrollUp({

        scrollName : "scrollUp",

        topDistance : "300",

        topSpeed : 300,

        animation : "fade",

        animationInSpeed : 200,

        animationOutSpeed : 200,

        scrollText : '<i class="fa fa-angle-up"></i>',

        activeOverlay : !1

    });

});

 

这里用了font awesome中的式样“fa fa-angle-up”。