我网上找了js让div漂浮在页面底部的实现,很多都是说<script type="text/javascript" defer>
    var adv = document.getElementById("bottomnav");
    adv.scrollTop = adv.scrollHeight;
</script><div id="bottomnav"><a href="#top">返回顶部</a></div>
我照写了那段js但是都实现不了让此div漂浮到页面底部?什么原因呢

解决方案 »

  1.   

    不考虑IE6的兼容性的话,仅此就已经OK。不用任何JS
    <div id="bottomnav" style="position:fixed; bottom:0;right:0;"><a href="#top">返回顶部</a></div>
      

  2.   

    顶UP.
    个人觉得,用JS做的动态漂浮极致恶心,拉动滚动条还跟着闪个蛋,学学CSS的静态显示嘛,这才是正道.
      

  3.   

    呵呵,大家都拒绝兼容IE6就OK了。恶心的IE
      

  4.   

    就是ie6不支持才想用js的,这样就没有兼容问题
      

  5.   

    那你这样好了:
    <!--[if IE 6]> 
    <script type="text/javascript">function gotop()
    {
        var o=document.getElementById("bottomnav");
        o.style.position='absolute';//变更其定位方式
        //获取顶离偏移量 
        var top= document.documentElement?(document.documentElement.scrollTop || 0):(document.body.scrollTop || 0);
        top = Math.max(top, (window.scrollY || 0));
        top+= document.documentElement?(document.documentElement.clientHeight || 0):(document.body.clientHeight || 0);
        //获取左边偏移量
        var left= document.documentElement?(document.documentElement.clientWidth || 0):(document.body.clientWidth || 0);
        //设置
        o.style.left=left-70+'px';
        o.style.top=top-20+'px';
    }
    window.attachEvent?window.attachEvent("onscroll",gotop):window.addEventListener("scroll",gotop,false);
    </script>
    <![endif]-->
    <div id="bottomnav" style="position:fixed; bottom:0;right:0;height:20px;width:70px;"><a href="javascript:window.scrollTo(0,0);">返回顶部</a></div>这样的话,那段js将只在IE6下才会执行,其他的浏览器是不会执行的
      

  6.   

    <div id="bottomnav" style="position:fixed; bottom:0;right:0;height:20px;width:70px;"><a href="javascript:window.scrollTo(0,0);">返回顶部</a></div>
    ie8没效果哦
      

  7.   

    IE6,7,8;FF,Chrome我全都试过,没问题我才会把代码贴出来,你说没效果是指悬浮底部没效果??
      

  8.   

    根本就不会悬浮底部,这句position:fixed;好像是形同虚设那样
      

  9.   


    我现在用的浏览器就是IE8。下面的代码你直接复制去测试吧。我不知道你拿过去后修改成什么样子了。
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>测试</title>
    <!--[if IE 6]> 
    <script type="text/javascript">function gotop()
    {
        var o=document.getElementById("bottomnav");
        o.style.position='absolute';//变更其定位方式
        //获取顶离偏移量 
        var top= document.documentElement?(document.documentElement.scrollTop || 0):(document.body.scrollTop || 0);
        top = Math.max(top, (window.scrollY || 0));
        top+= document.documentElement?(document.documentElement.clientHeight || 0):(document.body.clientHeight || 0);
        //获取左边偏移量
        var left= document.documentElement?(document.documentElement.clientWidth || 0):(document.body.clientWidth || 0);
        //设置
        o.style.left=left-70+'px';
        o.style.top=top-20+'px';
    }
    window.attachEvent?window.attachEvent("onscroll",gotop):window.addEventListener("scroll",gotop,false);
    </script>
    <![endif]-->
    </head><body>
    <div id="bottomnav" style="position:fixed; bottom:0;right:0;height:20px;width:70px;"><a href="javascript:window.scrollTo(0,0);">返回顶部</a></div>
    <div style="width:200px;height:1500px;border:1px solid #bfbfbf;"></div>
    </body>
    </body>
    </html>
      

  10.   


    <html>
    <head>
    <title>example</title>
    <script language="javascript">
    var sunX=0;
    var sunY=0;
    var directX=1;
    var directY=1;
    function dotaMove(){
    sunX+=directX;
    sunY+=directY; dota.style.top=sunY+"px";
    dota.style.left=sunX+"px"; if(sunX+dota.offsetWidth>=document.body.clientWidth||sunX<=0){
    directX=-directX;
    }
    if(sunY+dota.offsetHeight>=document.body.clientHeight||sunY<=0){
    directY=-directY;
    }
    }setInterval("dotaMove()",5);
    </script>
    </head>
    <body style="background-image:url('imgs/beijing.jpg');">
    <div id="dota" style="position:absolute"><img src="imgs/d1.jpg"></div>
    </body>
    </html>写了个简单的漂浮,当div碰到边框的时候就弹回继续漂浮。去运行下吧!!!好的话给点分。
      

  11.   

    。乱码,你本地路径访问的是吧?浏览器上选择:查看-->编码-->选择“简体中文”或“Unicode(utf-8)”
      

  12.   

    选了中文编码之后可以显示了,但是我原本的所有div都乱float了,干嘛要选中文编码才可以显示,每次都要选不是麻烦吗,还有那个页面变成了无下限的下拉了,我初学有很多不懂
      

  13.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
    ie8加了这句就支持position:fixed;了,但是不懂的是为什么我原本的那些div都乱放了,没加这句就没事
      

  14.   

    申明当前页面的W3c标准是 XHTML
    如果你其他的样式什么的设置没有遵循这个标准,就会出现你说的,乱掉
      

  15.   

    改好了,现在position:fixed有作用了,但是你那段js代码运气起来怎么变成无限下拉了?
      

  16.   

    无限下拉??我未例中只是定义了一个高度为1500px的div,让你看滚屏时的效果而已你又出问题了。。我IE6,7,8,FF,Chrome下均没有你说的什么无限下拉的情况
      

  17.   

    兼容IE6/IE7/IE8/IE9/Firefox/Chrome/Safari/Oprea浏览器的浮动代码
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style type="text/css">
    html,body{margin:0;padding:0;}
    #y1 {position:fixed;top:0;left:0;width:100px;height:100px;border:1px solid red;}
    #y2 {position:fixed;top:0;right:0;width:100px;height:100px;border:1px solid red;}
    #y3 {position:fixed;bottom:0;left:0;width:100px;height:100px;border:1px solid red;}
    #y4 {position:fixed;bottom:0;right:0;width:100px;height:100px;border:1px solid red;}
    </style>
    <!--[if lte IE 6]>
    <style>
    #y1 {position:absolute;}
    #y2 {position:absolute;}
    #y3 {position:absolute;}
    #y4 {position:absolute;}
    </style>
    <![endif]--><script type="text/javascript">
      //以下所有脚本只为IE6写,其他浏览器完全可以删除。
      function getViewportScrollX() {
        var scrollX = 0;
        if (document.documentElement && document.documentElement.scrollLeft) {
          scrollX = document.documentElement.scrollLeft;
        }
        else if (document.body && document.body.scrollLeft) {
          scrollX = document.body.scrollLeft;
        }
        else if (window.pageXOffset) {
          scrollX = window.pageXOffset;
        }
        else if (window.scrollX) {
          scrollX = window.scrollX;
        }
        return scrollX;
      }  function getViewportScrollY() {
        var scrollY = 0;
        if (document.documentElement && document.documentElement.scrollTop) {
          scrollY = document.documentElement.scrollTop;
        }
        else if (document.body && document.body.scrollTop) {
          scrollY = document.body.scrollTop;
        }
        else if (window.pageYOffset) {
          scrollY = window.pageYOffset;
        }
        else if (window.scrollY) {
          scrollY = window.scrollY;
        }
        return scrollY;
      }  function getViewportWidth() {
        var width = 0;
        if (document.documentElement && document.documentElement.clientWidth) {
          width = document.documentElement.clientWidth;
        }
        else if (document.body && document.body.clientWidth) {
          width = document.body.clientWidth;
        }
        else if (window.innerWidth) {
          width = window.innerWidth - 18;
        }
        return width;
      }  function getViewportHeight() {
        var height = 0;
        if (window.innerHeight) {
          height = window.innerHeight - 18;
        }
        else if (document.documentElement && document.documentElement.clientHeight) {
          height = document.documentElement.clientHeight;
        }
        else if (document.body && document.body.clientHeight) {
          height = document.body.clientHeight;
        }
        return height;
      }  if (navigator.userAgent.indexOf("MSIE 6") > -1 && navigator.userAgent.indexOf("MSIE 7") == -1 && navigator.userAgent.indexOf("MSIE 8") == -1) {
        window.ononload = window.onscroll = window.onresize = function (e) {
          var t = getViewportScrollY();
          var l = getViewportScrollX();
          var w = getViewportWidth();
          var h = getViewportHeight();
          document.getElementById("y1").style.left = l + "px";
          document.getElementById("y1").style.top = t + "px";      document.getElementById("y2").style.left = l + w - document.getElementById("y2").offsetWidth + "px";
          document.getElementById("y2").style.top = t + "px";      document.getElementById("y3").style.left = l + "px";
          document.getElementById("y3").style.top = t + h - document.getElementById("y2").offsetHeight + "px";      document.getElementById("y4").style.left = l + w - document.getElementById("y2").offsetWidth + "px";
          document.getElementById("y4").style.top = t + h - document.getElementById("y2").offsetHeight + "px";
        }
      }
    </script>
    </head>
    <body>
    <div id="y1">左上角位置的内容</div>
    <div id="y2">右上角位置的内容</div>
    <div id="y3">左下角位置的内容</div>
    <div id="y4">右下角位置的内容</div>
    <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
    <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
    <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
    <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
    </body>
    </html>