jquery 控制滚动条

// 使用 jQuery 滚动到页面的 500px 位置
$('html, body').animate({
    scrollTop: 500
}, 1000); // 1000ms 内完成滚动

// 使用 jQuery 实现平滑滚动到指定元素
$('html, body').animate({
    scrollTop: $('#targetElement').offset().top
}, 1000); // 1000ms 内完成平滑滚动

// 监听窗口滚动事件
$(window).scroll(function() {
    if ($(this).scrollTop() > 100) { // 当滚动超过 100px 时
        $('#navbar').addClass('fixed'); // 添加固定类
    } else {
        $('#navbar').removeClass('fixed'); // 移除固定类
    }
});

<!-- 确保 jQuery 库已加载 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

// 增加动画时间
$('html, body').animate({
    scrollTop: 500
}, 2000); // 2000ms 内完成滚动

// 使用 lodash 的 debounce 函数
const handleScroll = _.debounce(function() {
    if ($(this).scrollTop() > 100) {
        $('#navbar').addClass('fixed');
    } else {
        $('#navbar').removeClass('fixed');
    }
}, 200); // 200ms 内只触发一次

$(window).scroll(handleScroll);