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').onclick=function(){ 　　 　　　　window.scrollTo(0,0); }

 

 以上只是簡單實現，沒有考慮動畫。