offset返回undefined的可能原因

最新推荐文章于 2023-06-03 12:51:13 发布

J1ang1

最新推荐文章于 2023-06-03 12:51:13 发布

阅读量1.1k

点赞数

文章标签：前端 javascript html5

本文链接：https://blog.csdn.net/weixin_56628174/article/details/129676598

版权

做页面滚动的时候，用了document.getElementsByClassName，发现一直没反应，控制台也没把报错，后面找了很久的原因，最后才发现offset返回的是undefined。

document.getElementsByClassName返回的是当前类名的元素集合，而不是像document.getElementById那样返回第一个元素，所以要写成document.getElementsByClassName[0]，或者for循环下，或者用document.querySelector（但我用不惯，所以不是很懂）

页面滚动源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .a{
            margin: 10px auto;
            width: 1190px;
        }
        #slide_bar{
            background-color: pink;
            height: 200px;
            width: 50px;
            position: absolute;
            top: 300px;
            left: 50%;/* 元素左边界位于父元素中线 */
            margin-left: 595px;
        }
        .header{
            background-color: aqua;
            height: 120px;
        }
        .banner{
            background-color: yellowgreen;
            height: 300px;
        }
        .main{
            background-color: violet;
            height: 800px;
        }
        span{
            display: none;
            position: absolute;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div class="w"></div>
    <div id="slide_bar">
        <span>回到顶部</span>
    </div>
    <div class="header a"></div>
    <div class="banner a"></div>
    <div class="main a"></div>
    <script>
        var slide=document.getElementById("slide_bar");
        var header=document.getElementsByClassName("header")[0];
        var banner=document.getElementsByClassName("banner")[0];
        var main=document.getElementsByClassName("main")[0];
        var span=document.getElementsByTagName("span")[0];
        var bannerTop=banner.offsetTop;
        
        var slideTop=slide.offsetTop-bannerTop;
        var mainTop=main.offsetTop;
        window.addEventListener('scroll',function(){
            //console.log(1);
            //console.log(window.pageYOffset);
            //console.log("banner"+banner.offsetTop);
            if(window.pageYOffset>=bannerTop){
                slide.style.position="fixed";
                slide.style.top=slideTop+'px';
                console.log("banner");
            }
            else{
                slide.style.position="absolute";
                slide.style.top='300px';
            }
            if(window.pageYOffset>=mainTop){
                span.style.display="block";
                console.log("main");
            }
            else{
                span.style.display="none";
            }
        })
        span.addEventListener('click',function(){
            //window.scroll(0,0);
            //立刻回的
            //缓动回
            animate(window,0);
        })
        function animate(obj,target,callback){
            clearInterval(obj.timer);
            var step=(target-window.pageYOffset)/10;
            step=step>0?Math.ceil(step):Math.floor(step);
            obj.timer=setInterval(function(){
                if(window.pageYOffset==target){
                    clearInterval(obj.timer);
                    if(callback){
                        callback();
                    }
                }
                window.scroll(0,window.pageYOffset+step);
            },50)
        }
    </script>
</body>
</html>