首页 > 其他 > 详细

点击按钮回到顶部

时间:2016-08-30 19:30:30      阅读:61      评论:0      收藏:0      [点我收藏+]

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

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

  技术分享这是向上按钮的图片。

点击按钮回到顶部

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!