现在的位置: 首页 > 综合 > 正文

兼容全浏览器的返回顶部按钮

2014年06月26日 ⁄ 综合 ⁄ 共 1054字 ⁄ 字号 评论关闭

最近在复习前端的知识,无聊写了个返回顶部按钮。已兼容所有浏览器。

PS:不要在意我用的是H5的规范写的页面,JS代码才是核心

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            height: 2000px;
        }
        #topbtn {
            position: absolute;
            right: 5%;
        }
    </style>
</head>
<body>
    <script type="text/javascript">
        window.onload = function() {
            var t = document.createElement('div');
            t.setAttribute('id','topbtn');
            t.innerText = 'Top';
            t.style.top = document.documentElement.clientHeight - 80 + 'px';
            t.style.cursor = 'pointer';
            document.body.appendChild(t);
            if(window.attachEvent) {
                t.attachEvent('onclick',function() {
                    window.scrollTo(0,0);
                });
                window.attachEvent('onscroll',function() {
                    var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
                    t.style.top = scrollTop + document.documentElement.clientHeight -80 + 'px';
                });
            }
            else {
                t.addEventListener('click',function() {
                    window.scrollTo(0,0);
                });
                window.addEventListener('scroll',function() {
                    var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
                    t.style.top = scrollTop + document.documentElement.clientHeight -80 + 'px';
                });
            }
            
        }
    </script>
</body>
</html>

抱歉!评论已关闭.