欢迎光临小鱼网个人网站!

登录/注册

1.css引用

<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
#scrollUp{
	background-color: #777;
	color: #eee;
	font-size: 40px;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	bottom: 20px;
	right: 20px;
	overflow: hidden;
	width: 46px;
	height: 46px;
	border: none;
	opacity: .8;
}
#scrollup:hover{
	background-color: #333;
}
@media screen and (min-width: 992px){
	#scrollup{
		bottom: 100px;
	}
}

2.js引用

<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/markgoodyear/scrollup@2.4.1/dist/jquery.scrollUp.min.js"></script>
$(function(){
 $.scrollUp({
 scrollName:"scrollUp",
 topDistance: "300",
 topSpeed: 300,
 animation: "fade",
 animationInSpeed: 200,
 animationOutSpeed: 200,
 scrollText: '<i class="fa fa-angle-up"></i>',
 activeOverlay: !1
 });
});

参数:

scrollName 绑定 id,默认为 scrollUp topDistance 滚动条距离顶部多少距离时出现按钮,单位为 px,默认为 300 topSpeed 滚动到顶部的时间,单位为 ms,默认为 300 animation 按钮出现、隐藏的方式,可选 fade(淡入淡出)、slide(滑块)或 none(无) animationInSpeed 按钮出现的时间 animationOutSpeed 按钮隐藏的时间 scrollText 按钮内的文字,默认为 Scroll to top activeOverlay 是否显示参考线,值为十六进制颜色值或 false,默认为 false 自定义按钮样式


Copyright © www.xyubing.com All Rights Reserved. 备案号:蜀ICP备19023461号-1

免责声明:本站部分资源搜集整理于互联网或者网友提供,仅供学习与交流使用,如果不小心侵犯到你的权益,请及时联系我们删除该资源。