您的位置：首页 > 其它

页面滚动之回到顶部

2018-08-16 21:00 120 查看

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

　　*{margin: 0;padding: 0;}

　　html,body{height: 3000px;}

　　#t{

　　　　width: 60px;

　　　　height: 60px;

　　　　background: red;

　　　　position: fixed;

　　　　right: 0;

　　　　text-align: center;

　　　　line-height: 60px;

　　　　top: 400px;

　　　　display: none;

　　}

</style>

</head>

<body>

　　<div id="t">回到顶部</div>

</body>

</html>

<script type="text/javascript">

　　var box=document.getElementById("t");

　　window.onscroll=function(){

　　　　var sTop=document.documentElement.scrollTop||document.body.scrollTop;

　　　　if(sTop>400){

　　　　　　box.style.display="block";

　　　　}else{

　　　　　　box.style.display="none";

　　　　}

　　}

　　box.onclick=function(){

　　document.documentElement.scrollTop||document.body.scrollTop==0;

}

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航