用jquery || js实现滚动条防抖与页面锚点的简单方法

前言:我们在网页定义滚动事件的时候经常遇到滚动之后执行非常多次的方法,因为滚动的时候

 $(window).scroll(function () {})
 //方法是一直执行的

所以我们需要做一个防抖或者节流

1、定义方法

//滚动条滚动之后要执行的方法
function handlerFunc() {
    console.log($(window).scrollTop())
    if ($(window).scrollTop() >= 100 && $(window).scrollTop() < 400) {
        console.log("over")
        $('#toBanner1')[0].click();
        //去锚点位置
        // $('html,body').animate({scrollTop:$('#banner1').offset().top}, 1000);
    }
}

//简单的防抖函数
function debounce(func, wait, immediate) {
    //定时器变量
    var timeout;
    return function () {
        //每次触发scrolle,先清除定时器
        clearTimeout(timeout);
        //指定多少秒后触发事件操作handler
        timeout = setTimeout(func, wait);
    };
};

2、在jquery初始化里面绑定滚动函数

$(function () {
    window.addEventListener('scroll', debounce(handlerFunc, 500));
});
Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐