首页 > Web开发 > 详细

HTML 回到顶部 浮动

时间:2017-10-08 14:32:34      阅读:289      评论:0      收藏:0      [点我收藏+]
回到顶部
<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">// <![CDATA[
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>

 

参考:博客园

HTML 回到顶部 浮动

原文:http://www.cnblogs.com/aongao/p/7637281.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!