Welcome, Old Sport!

动画滚动至顶插件

by ilikecss ON 2011/04/26 6929

由于了一系列要求,我在网上搜集了各种滚动至顶的文章和教程,现在我给大家推荐这一款 jQuery 插件,制作很简便效果很 给力,滚动的速度可以自己改变参数而定,当你滚动鼠标至下时这个 Top 的按钮才会渐隐出现。这里制作的演示请大家看效果,如果 OK 请给评论谢谢~

Step1. 创建CSS

#toTop { 
	display: none;
	text-decoration: none;
	position: fixed;
	bottom: 10px;
	right: 10px;
	overflow: hidden;
	width: 51px;
	height: 51px;
	border: none;
	text-indent: -999px;
	background: url(../images/ui.totop.png) no-repeat left top;
	cursor: pointer;
}
#toTopHover {
	background: url(../images/ui.totop.png) no-repeat left -51px;
	width: 51px;
	height: 51px;
	display: block;
	overflow: hidden;
	float: left;
	opacity: 0;
	-moz-opacity: 0;
	filter: alpha(opacity=0);
}
#toTop:active, #toTop:focus {
	outline:none;
}

Step2. 插入jQuery和脚本包

<script src="jquery.ui.totop.js" type="text/javascript" charset="utf-8"></script>

脚本只有简单的几行

jQuery(window).load(function(){
	// To top plugin
	jQuery().UItoTop({ scrollSpeed: 200});
});	
4条评论
  1. #1

    Tan说道:

    果然给力啊,简洁又不失功能

  2. #2

    idiot说道:

    射射。。。




TOP