写页面的时候,经常遇到当滚动条离开页面顶部的时候,会显示一个回到顶部的按钮,点击回到顶部,页面就滑动到页面的顶部。直接贴代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>返回顶部</title>
		<script src="jquery-1.11.3.js"></script>
		<style>
			.img1{
				width:100%;
				height:428px;
				background:url("MTwoYear1.png") no-repeat center;
			}
			.wrapper{
				position:relative;
			}
			.rt_back{
				position:fixed;
				width:42px;
				height:42px;
				bottom:20px;
				right:20px;
			}
		</style>
	</head>
	<body lang="zh-cn">
		<div class="wrapper">
			<div class="img">
				<div class="img1"></div>
				<div class="img1"></div>
				<div class="img1"></div>
				<div class="img1"></div>
				<div class="img1"></div>
				<div class="img1"></div>
				<div class="img1"></div>
				<div class="img1"></div>
				<div class="img1"></div>
				<div class="img1"></div>
				<div class="img1"></div>
				<div class="img1"></div>
			</div>
		</div>
		<div class="rt_back">
			<img src="dingbu.png">
		</div>
		<script>
			(function(){
				$(".rt_back").hide();
				$(window).scroll(function(){
					if($(window).scrollTop()>0){
						$(".rt_back").fadeIn(400);
					}else{
						$(".rt_back").fadeOut(400);
					}
				});
			})(window);
			$(".rt_back").click(function(){
				$("html,body").animate({
					scrollTop:'0'
				},1000);
			});
		</script>
	</body>
</html>

  这是向上按钮的图片。

posted on 2016-08-30 18:43  太阳花0525  阅读(252)  评论(0编辑  收藏  举报