JS和JQuery监听滚动条事件

最新推荐文章于 2025-06-29 14:58:32 发布

Yaiba123

最新推荐文章于 2025-06-29 14:58:32 发布

阅读量1.2w

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端大杂烩

本文链接：https://blog.youkuaiyun.com/Cai181191/article/details/82799258

前端大杂烩专栏收录该内容

69 篇文章

订阅专栏

本文介绍了使用JavaScript监听页面滚轮事件的两种方法，并通过实例展示了如何根据滚动位置显示或隐藏返回顶部按钮，同时提供了jQuery实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网上查了一下，找到两种js监听滚轮事件的方法

（1）window.onscroll = function() {}

（2）document.addEventListener("onscroll", function (e) {})

js例子：

<a id="scrollup" href="#top" style="position:fixed;z-index: 999;display: none;">^</a>

#scrollup{
        background: #777;
        color:#eee;
        font-size: 40px;
        text-align: center;
        text-decoration: none;
        bottom:65px;
        right:20px;
        overflow: hidden;
        width:46px;
        height:46px;
        border:none;
        opacity:.8;
        &:active{opacity:.7;}
    }

<script type="text/javascript">
         window.onscroll= function(){
                //变量t是滚动条滚动时，距离顶部的距离
                var t = document.documentElement.scrollTop||document.body.scrollTop;
                var scrollup = document.getElementById('scrollup');
                //当滚动到距离顶部200px时，返回顶部的锚点显示
                if(t>=200){
                    scrollup.style.display="block";
                }else{          //恢复正常
                    scrollup.style.display="none";
                }
            }
</script>

写成jquery的话就是比如这样：