ScrollUp 是当前页面超出浏览器高度时出现的一个移动到顶部的按钮,点击该按钮页面滚动到顶部。
一、引入文件
<script src=”//cdn.bootcss.com/scrollup/2.4.0/jquery.scrollUp.min.js”></script>
执行JS
$.scrollUp();
还需要设置 css 风格
#scrollUp {
right: 0px;
bottom: 0px;
}
测试浏览,当页面滚动时,最右下角会出现 Scroll to up 链接字样,点击回滚到顶部,然后字样消失。
二、工作方式
当执行JS代码的时候,内部会创建一个 id=”scrollUp” 的 标签,属性为 :
position: fixed; display: none;
所以还必须设置 #scrollUp 位置风格才能正常显示出来。
三、参数设置
可以为 $.scrollUp() 函数添加参数选项,自定按钮文本样式或是一个图片。
$.fn.scrollUp.defaults = {
scrollName: ‘scrollUp’, // 默认创建时的元素 ID,不能是已经存在的元素 ID
scrollDistance: 300, // 距离顶端或底部 300px 时显示或隐藏
scrollFrom: ‘top’, // ‘top’ or ‘bottom’
scrollSpeed: 300, // 回到顶部速度(ms)
easingType: ‘linear’, // 使用 easing 动画路径
animation: ‘fade’, // 动画类型
animationSpeed: 200, // 动画速度
scrollTrigger: false, // 自定义触发元素 替代 scrollName 元素
scrollTarget: false, // 自定义回滚目标位置 可以是任意位置
scrollText: ‘Scroll to top’, // 元素HTML文本 里面可以嵌套IMG元素等代码
scrollTitle: false, // 自定义 a 的 title 属性值
scrollImg: false, // 是否使用图片
activeOverlay: false, // 显示scrollUp的基准线,false为不显示, e.g ‘#00FFFF’
zIndex: 2147483647 // Z-Index 叠加位置
};
四、如何使用
ScrollUp 官方源码提供了四种使用样式:
- tab样式
- 胶囊按钮样式
- 链接样式
- 圆型图片样式
使用这些样式必须设置相应的风格类:
/* 文字链接样式 */
#scrollUp {
bottom: 20px;
right: 20px;
}
/* Tab 标签样式 */
#scrollUp {
bottom: 0;
right: 30px;
width: 70px;
height: 70px;
margin-bottom: -10px;
padding: 10px 5px;
font: 14px/20px sans-serif;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
color: #828282;
-webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
background-color: #E6E6E6;
background-image: -moz-linear-gradient(top, #EBEBEB, #DEDEDE);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#EBEBEB), to(#DEDEDE));
background-image: -webkit-linear-gradient(top, #EBEBEB, #DEDEDE);
background-image: -o-linear-gradient(top, #EBEBEB, #DEDEDE);
background-image: linear-gradient(to bottom, #EBEBEB, #DEDEDE);
background-repeat: repeat-x;
-webkit-transition: margin-bottom 150ms linear;
-moz-transition: margin-bottom 150ms linear;
-o-transition: margin-bottom 150ms linear;
transition: margin-bottom 150ms linear;
}
#scrollUp:hover {
margin-bottom: 0;
}
/* 胶囊按钮样式 */
#scrollUp {
bottom: 20px;
right: 20px;
background-color: #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;
-webkit-backface-visibility: hidden;
}
#scrollUp:hover {
background-color: #000;
}
/* 图片样式 */
#scrollUp {
background-image: url("../../img/top.png");
bottom: 20px;
right: 20px;
width: 38px; /* Width of image */
height: 38px; /* Height of image */
}
五、不足之处
本来想把 scrollName 绑定到一个已经存在的并且风格样式已经设置好的按钮上,发现使用此插件行不通。
例如页面右侧有一排按钮,其中一个按钮为回到顶端,则无法使用该插件实现。
即使是用 scrollTrigger
代替 scrollName
也不行。内部代码实现始终会在元素上加上 position: fixed
。
这样对位置就固定了,没有那么随意可设置性。只有修改源码改正。