关于页面交互滑动效果实现-优快云博客

本文介绍了一个关于页面中实现交互式滑动效果的JavaScript脚本案例，该脚本通过监听用户操作来动态更新左侧导航菜单的活动状态，并同步滚动到相应的内容区域。文章详细解释了左侧点击切换效果、左侧滚动监听以及页面刷新时如何更新左侧导航等关键功能。

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

 var aboutUs = {
        ele: {
            slideEle: $(".about-slide"),
            slideAEle: $(".about-slide li a"),
            contentEle: $(".about-content .items")
        },
        init: function () {
            //左侧点击切换效果
            aboutUs.ele.slideAEle.click(aboutUs.aboutSlideToggle);
            //左侧滚动监听
            aboutUs.smartFloat();
            //刷新页面左侧更新
            aboutUs.aboutUrl();
        },
        aboutSlideToggle: function () {
            aboutUs.ele.slideAEle.removeClass("active");
            $(this).addClass("active");
        },
        aboutUrl: function () {
            var str = location.href.split("#")[1];
            aboutUs.ele.slideEle.find("li").each(function () {
                if ($(this).children().attr("href") == "#" + str) {
                    var top=$('.about-content #'+ str ).offset().top;
                    $("html,body").stop().animate({"scrollTop":top},600);
                    aboutUs.ele.slideAEle.removeClass("active");
                    $(this).children().addClass("active");
                }
            })
        },
        smartFloat: function () {
            var position = function () {
                var array = [];
                for (var i = 1; i < aboutUs.ele.contentEle.length + 1; i++) {
                    array[i] = $('.about-content .items:nth-child(' + i + ')').offset().top;
                }
                $(window).scroll(function () {
                    var scrolls = $(this).scrollTop() + 130;
                    for (var i = 1; i < aboutUs.ele.contentEle.length + 1; i++) {
                        if (scrolls > array[i] && scrolls < array[i + 1]) {
                            aboutUs.ele.slideAEle.removeClass("active");
                            $('.about-slide li:nth-child(' + i + ')').find("a").addClass("active");
                        } else if (scrolls > array[i]) {
                            aboutUs.ele.slideAEle.removeClass("active");
                            $('.about-slide li:nth-child(' + i + ')').find("a").addClass("active");
                        }
                    }
                });
            };
            return $(this).each(function () {
                position($(this));
            });
        }
    };
    aboutUs.init();