返回头部效果
返回头部
<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>
