点击按钮回到顶部

最新推荐文章于 2022-03-15 23:30:14 发布

weixin_30455023

最新推荐文章于 2022-03-15 23:30:14 发布

阅读量141

点赞数

文章标签： shell

原文链接：http://www.cnblogs.com/taiyanghua0522/p/5823226.html

版权

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

<!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>

　　这是向上按钮的图片。