返回顶部

　我写的这个返回到顶部的代码是引用了jquery方法，复制下面的一段代码，就可以看到效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>返回顶部</title>
	<style type="text/css">
		.back_top{
			position: fixed;
			z-index: 9000;
			right: 30px;
			bottom: 30px;
			background: #ccc;
			border-radius: 5px;
			display: none;
			cursor: pointer;
			padding: 10px;
		}
	</style>
</head>
<body>
	<p>这里是头部</p>
	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

	<div class="back_top">返回顶部</div>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$(window).scroll(function() {
				var sc=$(window).scrollTop();
				if(sc>0){
					$(".back_top").css("display","block");
				}
				else{
					$(".back_top").css("display","none");
				}
			});
			$(".back_top").click(function(){
				var sc=$(window).scrollTop();
				$("body,html").animate({scrollTop:0},500);
			});
		});
	</script>
</body>
</html>

　　　　　　思路：当滚动条大于0的时候，底部显示返回顶部的按钮，当点击返回顶部按钮时，动态的让滚动条为0；

 

posted @ 2017-02-14 11:29  Graceing  阅读(208)  评论(0)    收藏  举报