首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

相仿淘宝,当页面出现滚动条,点击回到顶部

2013-06-19 
类似淘宝,当页面出现滚动条,点击回到顶部。那个层先是隐藏的么?一出现滚动条他就出现了。如何实现的?回到顶

类似淘宝,当页面出现滚动条,点击回到顶部。
那个层先是隐藏的么?
一出现滚动条他就出现了。
如何实现的? 回到顶部 js
[解决办法]
获取body的scrollTop,如果>0,因为有滚动条并且滚动了,scrollTop就是正数,就显示
[解决办法]

<!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>

热点排行