如何实现按钮悬浮在页面底部

想做个按钮放下页面的右下方，并且可以随页面下拉而滚动，如何实现？急用！！

解决方案 »

  1.   

    写JS,改变button 的绝对坐标
      

  2.   

    button放在一个div 里面
    div有绝对坐标定义网页可见区域宽：document.body.clientWidth;   
    网页可见区域高：document.body.clientHeight;
    坐标就这个了,自己调整下
      

  3.   

    1、固定div
    <script type="text/javascript">
    window.onscroll = function () {
    var oWater = document.getElementById("divWater");
    oWater.style.top = document.documentElement.scrollTop+"px";}
    </script>
    </head>
    <body>
    <p>Try scrolling this window. </p>
    <div id="divWater" style="position: absolute; top:0;right: 0px; color: #cccccc; width: 150px; height: 30px; background-color: navy">Water </div>
    <p>Line 1 </p>
    <p>Line 2 </p>
    <p>Line 3 </p>
    <p>Line 4 </p>
    <p>Line 5 </p>
    <p>Line 6 </p>
    <p>Line 7 </p>
    <p>Line 8 </p>
    <p>Line 9 </p>
    <p>Line 10 </p>
    <p>Line 11 </p>
    <p>Line 12 </p>
    </body>
    </html>
      

  4.   


    <style type="text/css">
    * {
    margin:0px;
    padding::0px;
    }
    </style><script type="text/javascript">
    function pos(w, h)
    {
    __obj = document.getElementById("div1");
    __obj.style.width = w;
    __obj.style.height = h;
    __obj.style.border = "1px solid #aaa";
    __obj.style.position = "absolute";
    __obj.style.zIndex = "9999";
    __obj.style.top = document.body.clientHeight - w;
    __obj.style.left = document.body.clientWidth - h;
    }
    </script><div id="div1">
    <button>Click Me</button>
    </div><script type="text/javascript">
    pos(100, 100);
    </script>
      

  5.   

    !--浮动工具条开始-->
            <div class="DockBar" id="DockToolbar">        </div>        <script language="JavaScript">
    function KB_keepItInIE(theName,theWantTop,theWantLeft) {
    theRealTop=parseInt(document.body.scrollTop);theTrueTop=theWantTop+theRealTop;
    document.all[theName].style.top=theTrueTop; theRealLeft=parseInt(document.body.scrollLeft);
    theTrueLeft=theWantLeft+theRealLeft;document.all[theName].style.left=theTrueLeft};
    IE4=(document.all)?1:0; if (IE4) setInterval('KB_keepItInIE("DockToolbar",0,0)',1);
            </script>        <!--浮动工具条结束 -->
      

  6.   

    <style type="text/css">
    * {
    margin:0px;
    padding::0px;
    }
    </style><script type="text/javascript">
    function pos(w, h)
    {
    __obj = document.getElementById("div1");
    __obj.style.width = w;
    __obj.style.height = h;
    __obj.style.border = "1px solid #aaa";
    __obj.style.position = "absolute";
    __obj.style.zIndex = "9999";
    __obj.style.top = (document.body.scrollTop + document.body.clientHeight) - h;
    __obj.style.left = document.body.clientWidth - w;
    }
    </script>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <p>sfdddddddddddddddddddddddddddddddd</p>
    <div id="div1">
    <button>Click Me</button>
    </div><script type="text/javascript">
    pos(100, 100);
    window.onscroll = function(){
    pos(100, 100);
    }

    </script>