jQuery.scrollUp

ScrollUp 是当前页面超出浏览器高度时出现的一个移动到顶部的按钮，点击该按钮页面滚动到顶部。

一、引入文件

<script src=”//cdn.bootcss.com/scrollup/2.4.0/jquery.scrollUp.min.js”></script>

执行JS

$.scrollUp();

还需要设置 css 风格

#scrollUp {
  right: 0px;
  bottom: 0px;
}

测试浏览，当页面滚动时，最右下角会出现 Scroll to up 链接字样，点击回滚到顶部，然后字样消失。

二、工作方式

当执行JS代码的时候，内部会创建一个 id=”scrollUp” 的 标签，属性为 :

position: fixed;  display: none;

三、参数设置

可以为 $.scrollUp() 函数添加参数选项，自定按钮文本样式或是一个图片。

$.fn.scrollUp.defaults = {
        scrollName: ‘scrollUp’,      // 默认创建时的元素 ID，不能是已经存在的元素 ID
        scrollDistance: 300,         // 距离顶端或底部 300px 时显示或隐藏
        scrollFrom: ‘top’,           // ‘top’ or ‘bottom’
        scrollSpeed: 300,            // 回到顶部速度(ms)
        easingType: ‘linear’,        // 使用 easing 动画路径
        animation: ‘fade’,           // 动画类型
        animationSpeed: 200,         // 动画速度
        scrollTrigger: false,        // 自定义触发元素 替代 scrollName 元素
        scrollTarget: false,         // 自定义回滚目标位置 可以是任意位置
        scrollText: ‘Scroll to top’, // 元素HTML文本 里面可以嵌套IMG元素等代码
        scrollTitle: false,          // 自定义 a 的 title 属性值
        scrollImg: false,            // 是否使用图片
        activeOverlay: false,        // 显示scrollUp的基准线，false为不显示， e.g ‘#00FFFF’
        zIndex: 2147483647           // Z-Index 叠加位置
    };

四、如何使用

ScrollUp 官方源码提供了四种使用样式：

• tab样式
• 胶囊按钮样式
• 链接样式
• 圆型图片样式

使用这些样式必须设置相应的风格类：

/* 文字链接样式 */
#scrollUp {
    bottom: 20px;
    right: 20px;
}

/* Tab 标签样式 */
#scrollUp {
    bottom: 0;
    right: 30px;
    width: 70px;
    height: 70px;
    margin-bottom: -10px;
    padding: 10px 5px;
    font: 14px/20px sans-serif;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 0 #fff;
    color: #828282;
    -webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
    background-color: #E6E6E6;
    background-image: -moz-linear-gradient(top, #EBEBEB, #DEDEDE);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#EBEBEB), to(#DEDEDE));
    background-image: -webkit-linear-gradient(top, #EBEBEB, #DEDEDE);
    background-image: -o-linear-gradient(top, #EBEBEB, #DEDEDE);
    background-image: linear-gradient(to bottom, #EBEBEB, #DEDEDE);
    background-repeat: repeat-x;
    -webkit-transition: margin-bottom 150ms linear;
    -moz-transition: margin-bottom 150ms linear;
    -o-transition: margin-bottom 150ms linear;
    transition: margin-bottom 150ms linear;
}
#scrollUp:hover {
    margin-bottom: 0;
}

/* 胶囊按钮样式 */
#scrollUp {
    bottom: 20px;
    right: 20px;
    background-color: #555;
    color: #fff;
    font-size: 12px;
    font-family: sans-serif;
    text-decoration: none;
    opacity: .9;
    padding: 10px 20px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    -webkit-transition: background 200ms linear;
    -moz-transition: background 200ms linear;
    -o-transition: background 200ms linear;
    transition: background 200ms linear;
    -webkit-backface-visibility: hidden;
}
#scrollUp:hover {
    background-color: #000;
}

/* 图片样式 */
#scrollUp {
    background-image: url("../../img/top.png");
    bottom: 20px;
    right: 20px;
    width: 38px;    /* Width of image */
    height: 38px;   /* Height of image */
}

五、不足之处

本来想把 scrollName 绑定到一个已经存在的并且风格样式已经设置好的按钮上，发现使用此插件行不通。

例如页面右侧有一排按钮，其中一个按钮为回到顶端，则无法使用该插件实现。

即使是用 scrollTrigger 代替 scrollName 也不行。内部代码实现始终会在元素上加上 position: fixed。

这样对位置就固定了，没有那么随意可设置性。只有修改源码改正。

转载请注明出处：吖Go博客 » jQuery.scrollUp