版权声明：欢迎转载，请注明沉默王二原创。 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;
}笑对现实的无奈，不能后退的时候，不再傍徨的时候，永远向前 路一直都在──陈奕迅《路一直都在》
本文出自:【沉默王二的博客】
