|
jQuery 網(wǎng)頁(yè)如何快速的滾動(dòng)到頂部？現(xiàn)如今，頁(yè)面元素不斷豐富，就導(dǎo)致頁(yè)面的縱深比較廣，那么用戶一旦閱讀網(wǎng)頁(yè)到了底部，就會(huì)產(chǎn)生一個(gè)快速滾動(dòng)到頂部的需求，當(dāng)然了，很多網(wǎng)頁(yè)都這樣實(shí)現(xiàn)了。
一、效果圖
文檔的右下側(cè)出現(xiàn)一個(gè)向上滾動(dòng)的按鈕，鼠標(biāo)點(diǎn)擊后，就可快速的滾動(dòng)的文檔頂部。
二、實(shí)現(xiàn)方法
①、準(zhǔn)備材料
你可以到該資源庫(kù)jquery scrollUp下載，也可以到其官網(wǎng)下載。
②、導(dǎo)入文件
<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的必需品。
③、設(shè)置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”。
| 參數(shù)名 |
含義 |
| scrollName |
綁定 id，默認(rèn)為 scrollUp |
| topDistance |
滾動(dòng)條距離頂部多少距離時(shí)出現(xiàn)按鈕，單位為 px，默認(rèn)為 300 |
| topSpeed |
滾動(dòng)到頂部的時(shí)間，單位為 ms，默認(rèn)為 300 |
| animation |
按鈕出現(xiàn)、隱藏的方式，可選 fade（淡入淡出）、slide（滑塊）或 none（無(wú)） |
| animationInSpeed |
按鈕出現(xiàn)的時(shí)間 |
| animationOutSpeed |
按鈕隱藏的時(shí)間 |
| scrollText |
按鈕內(nèi)的文字，默認(rèn)為 Scroll to top |
| activeOverlay |
是否顯示參考線，值為十六進(jìn)制顏色值或 false，默認(rèn)為 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;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
笑對(duì)現(xiàn)實(shí)的無(wú)奈，不能后退的時(shí)候，不再傍徨的時(shí)候，永遠(yuǎn)向前 路一直都在──陳奕迅《路一直都在》
本文出自:【沉默王二的博客】
|
