页面滚动之回到顶部

<!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>

猜你喜欢

转载自www.cnblogs.com/yangyangxxb/p/9489898.html