点击分类链接后滚动至对应分类div顶部的实现需求

需求说明 #

已完成多产品分类顶部栏功能：点击分类链接可显示对应分类的Div，支持多选且功能正常。现需新增：点击分类链接后，页面自动滚动至最后选中的分类Div顶部。

• 示例1：按「餐边柜→餐桌→椅子」顺序选中三个分类，需显示全部三个Div，页面滚动到「椅子」分类Div顶部；
• 示例2：仅选中一个分类时，页面滚动到该分类Div顶部。

解决方案 #

在原有代码基础上添加滚动逻辑，具体修改如下：

1. 在分类点击事件的末尾添加滚动函数调用；
2. 新增滚动函数，根据最后选中的分类定位目标Div并执行平滑滚动。

修改后的完整代码：

// function to filter categories
$(function(){

var filters = $('.works-filter'); // 找到分类筛选器
var works = $('.workItem'); // 找到分类容器
var showAll = $('.showAll'); // 定位「显示全部」按钮

var cFilter, cFilterData; // 存储当前点击的筛选器及其对应的数据值
var filtersActive = []; // 存储已激活的筛选器数组

$(".works-filter").on("click", function () { // 监听分类筛选器点击事件
    cFilter = $(this);
    cFilterData = cFilter.attr('data-filter'); // 获取当前筛选器的分类值

    highlightFilter();
    applyFilter();
    scrollToLastSelected(); // 新增：调用滚动函数
});

function highlightFilter () {
    var filterClass = 'works-filter-active';
    if (cFilter.hasClass(filterClass)) {
        cFilter.removeClass(filterClass);
        removeActiveFilter(cFilterData);
    } else if (cFilter.hasClass('showAll')) {
        $('.works-filter').removeClass(filterClass);
        filtersActive = []; // 清空激活数组
        cFilter.addClass(filterClass);
    } else {
        $('.showAll').removeClass(filterClass);
        cFilter.addClass(filterClass);
        filtersActive.push(cFilterData);
    }
}

function applyFilter() {
    // 遍历所有分类容器，根据激活筛选器控制显示/隐藏
    $('.workItem').each(function(){
        var i;
        var classes = $(this).attr('class').split(' ');
        if (cFilter.hasClass('showAll') || filtersActive.length == 0) { // 显示全部的情况
            $('.workItem').addClass('show-workItem');
        } else {
            $(this).removeClass('show-workItem');
            for (i = 0; i < classes.length; i++) {
                if (filtersActive.indexOf(classes[i]) > -1) {
                    $(this).addClass('show-workItem');
                }
            }
        }
    });
}

// 从激活数组中移除取消选中的分类
function removeActiveFilter(item) {
    var index = filtersActive.indexOf(item);
    if (index > -1) {
        filtersActive.splice(index, 1);
    }
}

// 新增：滚动到最后选中的分类Div顶部
function scrollToLastSelected() {
    // 若点击的是「显示全部」或无激活分类，不执行滚动
    if (cFilter.hasClass('showAll') || filtersActive.length === 0) {
        return;
    }
    // 获取最后一个激活的分类
    var lastActiveFilter = filtersActive[filtersActive.length - 1];
    // 定位对应的显示状态的分类容器（取第一个匹配项）
    var targetElement = $('.workItem.' + lastActiveFilter + '.show-workItem').first();
    
    if (targetElement.length > 0) {
        // 平滑滚动到目标元素顶部，可根据导航栏高度调整offset值（如减去导航栏高度）
        $('html, body').animate({
            scrollTop: targetElement.offset().top
        }, 300); // 300为滚动动画时长，可按需修改
    }
}

});

代码说明 #

• 新增scrollToLastSelected函数：负责定位最后选中的分类对应的Div，执行平滑滚动；
• 滚动逻辑会跳过「显示全部」和无激活分类的场景；
• 若页面有固定导航栏，可将scrollTop的值调整为targetElement.offset().top - 导航栏高度，避免被导航栏遮挡；
• 动画时长300可根据需求修改，设为0则无平滑效果。

内容的提问来源于stack exchange，提问作者mlila_p