document.documentElement.与document.body区别

最新推荐文章于 2022-03-21 17:34:21 发布

花开时节多风雨

最新推荐文章于 2022-03-21 17:34:21 发布

阅读量1.1k

点赞数

文章标签： javascript document.body document.documentEle

本文链接：https://blog.csdn.net/CNZSWYMP/article/details/69360534

版权

问题：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;
}

花开时节多风雨

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
document.documentElement.与document.body区别

在idea的环境中使用js实现的返回顶部的操作在编写过程中遇到了一个问题就是在实现点击底部按钮是无法返回顶部，刚开始使用的是document.body.scrollTop如图1后来换为document.documentElement.scrollTop如图2然后实现了返回底部功能之前使用document.body.scrollTop不能实现的原因之一是：ie5.5之后已
复制链接

扫一扫