jquery scrollUp滚动到顶部

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

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

材料准备

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

1. font awesome
2. 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”。

参数 说明

参数我调整了一下，效果不大，这个还需要探索。

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中文网做的效果。

效果图

版权声明：本站博客均为qing_gee原创文章，若您需要引用、转载，只需要注明来源及原文链接即可。