jquery scrollUp滚动到顶部

前言：当页面滚动到很靠下的地方时，如果有一个快捷按钮使之滚动到页面顶部，自然是用户所需的，而jquery scrollUp这个插件实现了我们这个需求，然而只是看 jQuery滚动到顶部插件scrollUp这样的文章，显然是没有效果的，还需要另外的设置。

另外我想说的是，本来我这个探索jfinal的系列是说jfinal的，然而随着项目进度的延伸，我发觉这个标题已经不能满足于我的需求，我想讲的是“探索jfinal与bootstrap”，然而专栏不能再更改题目，于是我只能忍了。

材料准备

你可以选择到我的资源库进行下载，也可以到官方下载，官方提供的需要你进行一些修改。

font awesome

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>

还有其他的，你就自行导入吧！

js

// 启用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”。

参数 说明

[thead]
[/thead]

参数名	含义
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;
}

自定义的式样。

我是仿照bootstrap中文网做的效果。

效果图