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

最新推荐文章于 2019-06-13 21:44:23 发布

C860

最新推荐文章于 2019-06-13 21:44:23 发布

阅读量1k

点赞数

分类专栏： HTML/CSS 文章标签：前端 html javascript

本文链接：https://blog.csdn.net/C860_zy/article/details/19851317

版权

HTML/CSS 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

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

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>