类似淘宝，当页面出现滚动条，点击回到顶部。

那个层先是隐藏的么？
一出现滚动条他就出现了。
如何实现的？回到顶部js

解决方案 »

  1.   

    获取body的scrollTop，如果>0，因为有滚动条并且滚动了，scrollTop就是正数，就显示
      

  2.   

    那为什么当scrollTop>0时，回到顶部那个按钮，一直浮在在页面上？
      

  3.   

    <!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>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script type="text/javascript">
        var cW,cH;
        function scrolls() {
            cW = document.documentElement.clientWidth || document.body.clientWidth;
            cH = document.documentElement.clientHeight || document.body.clientHeight;       
            var _div = document.createElement('div');
            _div.className = 'divClass';
            _div.appendChild(document.createTextNode('UP'));
            _div.id = 'divId';
            _div.onclick = function() {
                //document.documentElement.scrollTop = '0';
                var bodys = document.documentElement || document.body;
                var explorer = window.navigator.userAgent ;
                if(explorer.indexOf("Chrome") >= 0) {
                    $(document.body).animate({scrollTop: '0'}, 100);
                } else {
                    $(document.documentElement).animate({scrollTop: '0'}, 100);
                }
                document.getElementById('divId').style.display = 'none';
            }
            //_div.setAttribute('onclick', function() {
                //document.documentElement.scrollTop = '0';
                //document.getElementById('divId').style.display = 'none';
                     
            //});
            document.body.appendChild(_div);
            document.getElementById('divId').style.left = (cW - 40) + 'px';
            document.getElementById('divId').style.top = (cH - 40) + 'px';
                 
        }
        function shang() {
            var bodys = document.documentElement.scrollTop || document.body.scrollTop;
            if(bodys > 10) {
                document.getElementById('divId').style.display = 'block';
            } else {
                document.getElementById('divId').style.display = 'none';
            }
        }
        function resizediv() {
            cW = document.documentElement.clientWidth || document.body.clientWidth;
            cH = document.documentElement.clientHeight || document.body.clientHeight;   
            var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            document.getElementById('divId').style.left = (cW - 40 + scrollLeft) + 'px';
            document.getElementById('divId').style.top = (cH - 40 + scrollTop) + 'px';   
        }
        window.onload = function() {
            scrolls();
        }
        window.onresize = resizediv;
        window.onscroll = function() {
            shang();
            resizediv();
        }
        </script>
        <style type="text/css">
        body { margin:0; padding:0; }
        .divClass { width:40px; height:40px; background-color:black; filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5; position:absolute; color:red; text-align:center; cursor:pointer; display:none; }
        </style>
        </head>
        <body>
        <div style='height:1000px;'></div>
        </body>
        </html>
      

  4.   

    那为什么当scrollTop>0时，回到顶部那个按钮，一直浮在在页面上？那个按钮是个绝对定位，计算body的scollTop然后赋值给这个按钮css的top，他就浮动到页面上，随着滚动条滚动而它不动