JQuery 頁面如何快速滾動到頂部？

版權聲明：歡迎轉載，請注明沉默王二原創。 https://blog.csdn.net/qing_gee/article/details/48517971

JQuery 網頁如何快速的滾動到頂部？現如今，頁面元素不斷豐富，就導緻頁面的縱深比較廣，那麼使用者一旦閱讀網頁到了底部，就會産生一個快速滾動到頂部的需求，當然了，很多網頁都這樣實作了。

一、效果圖

文檔的右下側出現一個向上滾動的按鈕，滑鼠點選後，就可快速的滾動的文檔頂部。

二、實作方法

①、準備材料

你可以到該資源庫

jquery 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>           

font-awesome作為scrollup的必需品。

③、設定scrollup的樣式

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

參數名	含義
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;
}           

笑對現實的無奈，不能後退的時候，不再傍徨的時候，永遠向前　路一直都在──陳奕迅《路一直都在》

本文出自:【

沉默王二的部落格 】