回到顶部功能

转载于 2015-07-31 14:57:00 发布 · 108 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/muwei/p/4692171.html

文章标签：

<script type="text/javascript">
	$(document).ready(function() {
		//第一层业务，监听窗口卷动
		//决断这个火箭是否可见。临界点就是卷动值为300
		$(window).scroll(function(){
			var A = $(window).scrollTop();
			if(A > 300){
				$(".backtotop").stop(true).fadeIn();
			}else{
				$(".backtotop").stop(true).fadeOut();
			}
		});

		//第二层业务，监听火箭的点击事件
		$(".backtotop").click(function(){
			$(this).css("background-image","url(images/rocket2.jpg)");
			$("html,body").stop(true).animate({"scrollTop":0},1000,function(){
				$(".backtotop").css("background-image","url(images/rocket1.jpg)");
			});
		});
	});
</script>

卷动值大于300时，小火箭出现；

点击小火箭，变色（更换背景图）；

回到顶部，小火箭变色并消失

转载于:https://www.cnblogs.com/muwei/p/4692171.html