老师我的回到顶部不兼容IE浏览器,老师看下

来源:1-1 课程介绍

菜鸟00001

2019-05-23 15:52:28

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>back_to_the_top</title>

</head>

<style type="text/css">

.mains{

width:1200px;

margin:0 auto;

}

   .mains img{

    width:100%;

    height:100%;

   }

   .btn{

    display:none;

    width:40px;

    height:40px;

    position:fixed;

    left:50%;

    bottom:30px;

    background:url(img/img_top.jpg) no-repeat left top;

    margin-left:600px;

   }

   .btn:hover{

      background:url(img/img_top.jpg) no-repeat left -40px;

   }

</style>

<body>

<div class="mains">

<img src="img/juhuasuan_img.png"/>

</div>

<a href="javascript:;" title="回到顶部" id="btn" class="btn"></a>

<script type="text/javascript" src="js/back_top.js"></script>

<!-- <script type="text/javascript">

var btn=document.getElementById('btn');

//存放定时器的变量

var timer=null;

//isTop

var isTop=true;

//获取可视区域高度

var clientHeight=document.documentElement.clientHeight;

alert(clientHeight)

        

//滚动条滚动时触发

window.onscroll=function(){

//点击的时候获取滚动条高度

var osTop=document.documentElement.scrollTop || document.body.scrollTop;

            if(osTop>clientHeight){

             btn.style.display='block';

            }else{

             btn.style.display='none';

            }

if(!isTop){

clearInterval(timer);

}

isTop=false;

}

        btn.onclick=function(){

         timer=setInterval(function(){

         //点击的时候获取滚动条高度

    var osTop=document.documentElement.scrollTop || document.body.scrollTop;

    //滚动条速度值

    var isSpeed=Math.floor(-osTop/5);

            //滚动条默认值

            document.documentElement.scrollTop = document.body.scrollTop = osTop+isSpeed;

            isTop=true;

            console.log(osTop-isSpeed);

            //判断滚动条是否到达顶点

            if(osTop==0){

             clearInterval(timer);

            }

         },30);

         

        }

</script> -->

</body>

</html>

//公共变量

var obtn=document.getElementById('btn'),//获取元素

    clientHeight=document.documentElement.clientHeight,//获取可视区域高度

    timer=null,//定时器

    isTop=true;//判断滚动是否滚动

    

    console.log(obtn);


    //滚动条事实滚动时方法

    window.onscroll=function(){

        //回到顶部按钮的显示和隐藏

        var osTop=document.documentElement.scrollTop||document.documentElement.scrollTop;//获取滚动条滚动时高度

        if(osTop>clientHeight){

        obtn.style.display='block';

        }else{

        obtn.style.display='none';

        }


    if(!isTop){

    clearInterval(timer);

    }

    isTop=false;

    };


    obtn.onclick=function(){

    alert('')

    timer = setInterval(function(){

    var osTop=document.documentElement.scrollTop||document.documentElement.scrollTop;//获取滚动条滚动时高度

    //滚动条速度

    var isSpeed=Math.floor(-osTop/5);

    document.documentElement.scrollTop=document.documentElement.scrollTop=osTop+isSpeed;

        isTop=true;

        if(osTop==0){

        clearInterval(timer);

        } 

    },30)

    }


写回答

1回答

好帮手慕慕子

2019-05-23

同学你好, 兼容IE浏览器需要使用document.body表示document.documentElement。

 建议修改:可以在需要的地方使用或的关系, 实现兼容, 示例:

http://img.mukewang.com/climg/5ce67e2600014b9912720196.jpg

老师只给出了一个修改的示例, 其他需要修改的地方, 同学自己下去调整哦

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~


0

0 学习 · 4826 问题

查看课程