返回头部效果 | 返回头部

返回头部
    <style>
        body {
            width: 2000px;
        }
       .top{
           position: fixed;
           right:50px;
           bottom:100px;
           display: none;
       }
    </style>
</head>
<body>
	<!--
		获取页面滚走兼容 ： document.body.scrollTop || document.documentElement.scrollTop
	-->
<div id="gotop" class="top">
    <img src="images/Top.jpg" alt=""/>
</div>
 <p>天王盖地虎，宝塔镇河妖</p>
   <p>天王盖地虎，宝塔镇河妖</p>
   <p>天王盖地虎，宝塔镇河妖</p>
   <p>天王盖地虎，宝塔镇河妖</p>
   <p>天王盖地虎，宝塔镇河妖</p>
   <p>天王盖地虎，宝塔镇河妖</p>
   <p>天王盖地虎，宝塔镇河妖</p>
   <p>天王盖地虎，宝塔镇河妖</p>
   <p>天王盖地虎，宝塔镇河妖</p>
   <p>天王盖地虎，宝塔镇河妖</p>
   <p>天王盖地虎，宝塔镇河妖</p>
   <p>天王盖地虎，宝塔镇河妖</p>
   <p>天王盖地虎，宝塔镇河妖</p>
   <p>天王盖地虎，宝塔镇河妖</p>
   <p>天王盖地虎，宝塔镇河妖</p>
   <p>天王盖地虎，宝塔镇河妖</p>
   <p>天王盖地虎，宝塔镇河妖</p>
</body>
</html>
<script type="text/javascript">
	/*
	 1、触发滚动条，小火箭显示
	 2、点击小火箭   滚动条回到顶部  小火箭消失
	*/
	var gotop = document.getElementById("gotop");
	window.onscroll = function(){//触发滚动条，小火箭显示
		var Stop = document.body.scrollTop || document.documentElement.scrollTop;
		if(Stop > 0){
			gotop.style.display = "block";
		}
	}
	gotop.onclick = function(){//点击小火箭   滚动条回到顶部  小火箭消失
		document.body.scrollTop = document.documentElement.scrollTop = 0;
		gotop.style.display = "none";
	}
</script>