zoukankan      html  css  js  c++  java
  • 浮动div,回到顶部

    <div style="height: 5000px">这是顶部</div>
    <div id="FloatDIV" style="position: absolute;top: 0px; z-index:9999; background: #fff000;cursor: pointer"
     onclick="window.scrollTo(0,0);">
        回到顶部
    </div>
    
    <script type="text/javascript"> 
        var MarginLeft = 10;    //浮动层离浏览器右侧的距离
      var MarginTop = document.body.clientHeight - 80;   //浮动层离浏览器顶部的距离(浏览器高度-div高度)
      var Width = 25;            //浮动层宽度
      var Heigth= 80;           //浮动层高度
      
      //设置浮动层宽、高
      function Set()
      {
          document.getElementById("FloatDIV").style.width = Width + 'px';
          document.getElementById("FloatDIV").style.height = Heigth + 'px';
      }
      
      //实时设置浮动层的位置
      function Move()
      {
            var b_top = window.pageYOffset  
                    || document.documentElement.scrollTop  
                    || document.body.scrollTop  
                    || 0;
            var b_width= document.body.clientWidth;
          document.getElementById("FloatDIV").style.top = b_top + MarginTop + 'px';
          document.getElementById("FloatDIV").style.left = b_width - Width - MarginLeft + 'px';
          setTimeout("Move();",100);
      }
      
      Set();
      Move();
    
    </script> 
    
     
    回到顶部
  • 相关阅读:
    笛卡尔树学习笔记
    图论基础(自认为很全)
    我的博客在这里
    C++学习资料
    test
    个人介绍
    CF1153F Serval and Bonus Problem
    【ZJOI2020】抽卡
    【LOJ】小 Q 的序列
    我的个人博客:https://xyix.github.io
  • 原文地址:https://www.cnblogs.com/ljmin/p/2616091.html
Copyright © 2011-2022 走看看