如何创建菜单链接至带data-filter的Mixitup筛选按钮并实现滚动激活

步骤1：修改HTML结构，建立链接与按钮的对应关系 #

给底部的每个筛选按钮添加唯一id，让顶部菜单链接的href指向这些id，同时保留按钮的data-filter属性：

顶部菜单链接：

<a href="#btn-sites">站点筛选</a>
<a href="#btn-contextual">上下文筛选</a>
<a href="#btn-targeting">目标筛选</a>

底部筛选按钮：

<button type="button" id="btn-sites" data-filter=".sites">站点按钮</button>
<button type="button" id="btn-contextual" data-filter=".contextual">上下文按钮</button>
<button type="button" id="btn-targeting" data-filter=".targeting">目标按钮</button>

步骤2：修改JavaScript代码，实现滚动+激活筛选功能 #

更新原有逻辑，在滚动到目标按钮后，主动触发按钮的点击事件，以此激活Mixitup的筛选功能：

document.querySelectorAll('a[href^="#"]').forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault();
    // 获取目标按钮的id
    const targetId = this.getAttribute('href').substring(1);
    const targetBtn = document.getElementById(targetId);
    
    if (!targetBtn) return;
    
    // 计算滚动位置（保留原有的偏移量设置）
    const topOffset = 160;
    const elementPosition = targetBtn.getBoundingClientRect().top;
    const offsetPosition = elementPosition - topOffset;
    
    // 平滑滚动到按钮区域
    window.scrollBy({
      top: offsetPosition,
      behavior: 'smooth'
    });
    
    // 触发按钮点击，激活Mixitup筛选
    targetBtn.click();
    
    // 可选：给激活的按钮添加高亮样式（需提前在CSS中定义.active类）
    document.querySelectorAll('[data-filter]').forEach(btn => btn.classList.remove('active'));
    targetBtn.classList.add('active');
  });
});

说明 #

• 滚动逻辑保留了原有的160px偏移量，可根据页面布局自行调整数值。
• 通过targetBtn.click()直接触发按钮的点击事件，Mixitup会自动响应data-filter对应的筛选操作。
• 可选的高亮样式能让用户直观看到当前激活的筛选按钮，需要提前在CSS中定义.active类的样式。

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