JQuery 页面如何快速滚动到顶部？

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”。

参数名 含义

scrollName 绑定 id，默认为 scrollUp

topDistance 滚动条距离顶部多少距离时出现按钮，单位为 px，默认为 300

topSpeed 滚动到顶部的时间，单位为 ms，默认为 300

animation 按钮出现、隐藏的方式，可选 fade（淡入淡出）、slide（滑块）或 none（无）

animationInSpeed 按钮出现的时间

animationOutSpeed 按钮隐藏的时间

scrollText 按钮内的文字，默认为 Scroll to top

activeOverlay 是否显示参考线，值为十六进制颜色值或 false，默认为 false

④、CSS样式表

#scrollUp {
    background-color: #777;
    border: medium none;
    bottom: 100px;
    color: #eee;
    font-size: 40px;
    height: 46px;
    line-height: 1;
    opacity: 0.8;
    overflow: hidden;
    right: 20px;
    text-align: center;
    text-decoration: none;
    width: 46px;
}
#scrollUp:hover {
    background-color: #333;
}