Jquery plugin ScrollUp使用和实现

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

一、ScrollUp使用

ScrollUp是一个轻量级的Jquery插件，它创建一个可自定义的“滚动到顶部”的按钮，在任意的网站中进行简单的调用就能达到效果。

ScrollUp提供了四种样式

1. tab样式
2. 胶囊按钮样式
3. 链接样式
4. 圆型图片样式
5. 也可以自定义样式

首先我们需要先引入jquery.scrollUp.min.js，当然我们是假定了你已经引入了jquery必须文件为前提的：

<script type="text/javascript"src="https://github.com/markgoodyear/scrollup/blob/master/js/jquery.scrollUp.min.js"></script>

该代码在github的地址为：scrollUp

最简单的调用方式如下：

$(function(){
    $.scrollUp();
});

该插件所有的参数默认属性为：

$(function(){
    $.scrollUp({
        scrollName:'scrollUp',// 元素ID
        topDistance:'300',// 顶部距离显示元素之前 (px)
        topSpeed:300,// 回到顶部的速度 (ms)
        animation:'fade',// 动画类型Fade, slide, none
        animationInSpeed:200,
        animationOutSpeed:200,
        scrollText:'Scroll to top',// 元素文本
        activeOverlay:false,// 显示scrollUp的基准线，false为不显示, e.g '#00FFFF'
    });
});

对象的销毁

$.scrollUp.destroy();

下面分别说明该插件的三种样式的设置：

三种样式插件的设置都是一样的，如下：

$(function(){
    $.scrollUp({
        animation:'fade',
    　　 activeOverlay:'#00FFFF'
    });
});

以上把移动效果设置成“fade”，基准线颜色设置成“#00ffff”;

这三种方式的主要区别就是css

第一种：文字链接样式

这种样式是最简单的，返回到顶部的按钮是用文本显示

css如下：

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

该方式只是设置了“scroll to top”的位置

第二种：按钮样式

css如下：

#scrollUp {
    bottom:20px;
    right:20px;
    background:#555;
    color:#fff;
    font-size:12px;
    font-family:sans-serif;
    text-decoration:none;
    opacity:.9;
    padding:10px20px;
    -webkit-border-radius:16px;
    -moz-border-radius:16px;
    border-radius:16px;
    -webkit-transition:background200mslinear;
    -moz-transition:background200mslinear;
    transition:background200mslinear;
}
    #scrollUp:hover {
        background:#000;
　　}

这种方式设置了背景、边框、字体、颜色以及鼠标经过的样式变化等，最终呈现出的就是一个按钮的形式。

第三种：tab样式

css如下：

#scrollUp {
    bottom:-10px;
    right:30px;
    width:70px;
    height:70px;
    padding:10px5px;
    font-family:sans-serif;
    font-size:14px;
    line-height:20px;
    text-align:center;
    text-decoration:none;
    text-shadow:01px0#fff;
    color:#828282;
    -webkit-box-shadow:00px2px1pxrgba(0,0,0,0.2);
    -moz-box-shadow:00px2px1pxrgba(0,0,0,0.2);
    box-shadow:00px2px1pxrgba(0,0,0,0.2);
    background-color:#E6E6E6;
    background-image:-moz-linear-gradient(top,#EBEBEB,#DEDEDE);
    background-image:-webkit-gradient(linear,00,0100%,from(#EBEBEB),to(#DEDEDE));
    background-image:-webkit-linear-gradient(top,#EBEBEB,#DEDEDE);
    background-image:-o-linear-gradient(top,#EBEBEB,#DEDEDE);
    background-image:linear-gradient(tobottom,#EBEBEB,#DEDEDE);
    background-repeat:repeat-x;
    -webkit-transition:bottom150mslinear;
    -moz-transition:bottom150mslinear;
    transition:bottom150mslinear;
}
    #scrollUp:hover {
        bottom:0px;
　　}

这种方式更具有友好性，当向下滚动浏览器时，“scroll to top”按钮就像tab选项卡一样弹出。

DEMO请参看：DEMO

二、想想如果我们自己如何去实现呢？

 简单实现：

 1、监听window的scroll事件，判断高度。

 2、点击按钮滚到最上面。

 

//样式
#scrollUp {
position: fixed;
z-index: 2147483647;
display: none;
bottom: 20px;
right: 20px;
background: #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;
}

#scrollUp:hover {
cursor: pointer;
opacity: 1;
background: #333333;
}

<div id='#scrollUp'>回到顶部</div>
//Jquery实现
$(window).scroll(function() {
    if( $(window).scrollTop()>'指定高度'){
        $('#scrollUp').show();
    }else{
        $('#scrollUp').hide();
    }
});

  $('#scrollUp').click(function(){
    $(document).scrollTo(0,500);
});

//Javascript实现
window.onscroll = function () {
　　if (document.documentElement.scrollTop + document.body.scrollTop >'指定高度') {
　　　　document.getElementById('scrollUp').style.display = "block";
} else { 
　　　　document.getElementById('scrollUp').style.display = "none"; }
　　}；
  document.getElementById('scrollUp').οnclick=function(){ 　　
　　　　window.scrollTo(0,0);
}

 

 以上只是简单实现，没有考虑动画。