返回顶部-CSDN博客

本文链接：https://blog.csdn.net/qq_19558705/article/details/50364615

点击返回顶部，简单易学

效果图：

第一步：将返回按钮fixed到具体位置后隐藏

第二步：当浏览器滚动条大于多少像素时显示按钮，小于多少时隐藏

第三步：点击滚动

代码：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>返回顶部</title>
		<meta name="Keywords" content="关键词,关键词">
		<meta name="Description" content="">
		<!--css,js-->
		<style type="text/css">
			*{margin:0;padding:0;}
			p{width:300px; height:200px;background:#ccc; margin:10px auto;}
			.top{width:60px;height:50px;position:fixed;right:22px;bottom:100px;display:none;}
			.top span{width:60px;height:50px;background:url("img/icon_top.png")no-repeat center #000;display:block;box-shadow:2px 4px 10px #ccc;border-radius:4px;cursor:pointer;}
		</style>
		<script type="text/javascript" src="js/jquery.js" ></script>
	</head>
	<body>
		<p>1</p>
		<p>2</p>
		<p>3</p>
		<p>4</p>
		<p>5</p>
		<p>6</p>
		<p>7</p>
		<div class = "top">
			<span></span>
		</div>
		<script type = "text/javascript">
			//返回顶部的小图标的现隐
			$(window).scroll(function(){
				if($(window).scrollTop() >= 100){
					$(".top").fadeIn(600);
				}else{
					$(".top").stop(true,true).fadeOut(600);
				}
			});
			//返回顶部
			$(".top").click(function(){
				$("html,body").animate({
					scrollTop:0
				},800);
			});
		</script>
	</body>
</html>

Jquery和箭头图片，请读者自己准备吧；或者换其他图片，比如火箭之类的。

转载请注明来源：http://blog.csdn.net/qq_19558705/article/details/49851879

更多干货等你来拿 http://www.itit123.cn/