document.documentElement.与document.body区别

最新推荐文章于 2022-06-15 13:38:36 发布

原创最新推荐文章于 2022-06-15 13:38:36 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #document.body #document.documentEle

本文介绍了解决IDEA环境下document.body.scrollTop对象无法使用的问题，并提供了实现页面滚动及回顶部功能的具体代码示例。

问题：idea环境下使用document.body.scrollTop对象无法实现。

解决方案：将document.body.scrollTop替换为document.documentElement.scrollTop。

原因：有<!DOCTYPE..>标签时使用document.documentElement。

没有<!DOCTYPE..>标签时，使用document.body。

IE5.5之后不支持document.body.scrollX对象

最后附上返回底部功能实现的源码

html代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="app.js"></script>
</head>
<body>
    <div class="box">
        <img src="阿离.jpg" height="4000px"><br/>
    </div>
    <a  href="javascript:;" class="btn" title="回到顶端" id="btn"></a>
</body>
</html>

JS:



window.onload = function () {
    var topbtn = document.getElementById("btn");
    var timer = null;
    var pagelookheight = document.documentElement.clientHeight;


    window.onscroll = function(){
//        alert("hello");
        var backtop = document.documentElement.scrollTop;
        if(backtop >= pagelookheight){
            topbtn.style.display = "block";
        }else{
            topbtn.style.display = "none";
        }
    }


    topbtn.onclick = function () {
//        alert("Hello")


        timer = setInterval(function () {
            var backtop = document.documentElement.scrollTop;
            var speedtop = backtop/5;
            document.documentElement.scrollTop = backtop -speedtop;
            if(backtop ==0){
                clearInterval(timer);
            }
        }, 30);
    }
}

css:


*{
    margin: 0;
    padding: 0;
}


.box{
    width: 1000px;
    margin: 0 auto;
}


.btn{
    width: 40px;
    height: 80px;
    position: fixed;
    bottom: 30px;
    background: red;
    left: 50%;
    margin-left: 500px;
}


.btn:hover{
    background: green;
}