JavaScript实现点击分类按钮自动滚动到对应文章的方案

现有代码核心问题 #

• 选择器逻辑错误：document.querySelector只会匹配页面中第一个符合条件的元素，既没有获取全部分类按钮，也没有获取全部文章区块，多分类、多内容场景下完全无法覆盖
• 事件绑定对象错误：代码中获取到的categoryId是属性值字符串，字符串本身不存在addEventListener方法，点击逻辑根本不会触发
• 匹配逻辑不可扩展：当前硬编码要求分类id和内容id完全相等，后续两个id迭代后不匹配时功能直接失效
• 滚动API使用错误：window.scrollTo不支持直接传入id值作为参数，无法触发正确的滚动行为
• 属性写法不规范：自定义的categoryId、contentId属性不符合HTML自定义属性规范，应该使用data-*前缀的标准写法

修正步骤 #

1. 调整Twig模板代码 #

把关联逻辑直接在渲染层绑定，不依赖id相等的规则：分类按钮上通过data-*属性直接存储对应关联的文章区块定位标识，文章区块设置标准id属性方便定位。后续如果分类和内容的关联规则变化，只需要修改模板中填充的关联id字段即可，不需要调整JS逻辑。

{% if category is not null and category|length > 0 %}
    {% for categorie in category %}
    <li class="nav-item category-link">
        {# 后续关联规则变化时，只需要把data-target里的categorie.id替换为对应关联的内容id字段即可 #}
        <button class="nav-link" data-target="#content-{{categorie.id}}">{{categorie.name}}</button>
    </li>
    {% endfor %}
{% endif %}
        </ul>
    </div>
</div>
</nav>
<div class="">
    {% for content in contents %}
    {# 给内容块设置标准id，和按钮上的data-target值对应 #}
    <div id="content-{{content.id}}" class="content-block">
        <h2 class="text-center">{{content.title}}</h2>
    </div>
    {% endfor %}
</div>

注意：初始状态不要给所有按钮都加active类，只需要给默认展示的第一个分类按钮加即可，避免样式错乱

2. 重写JS交互逻辑 #

遍历所有分类按钮绑定点击事件，点击时读取按钮上存储的目标内容选择器，定位到对应元素后触发平滑滚动，同时同步切换按钮的active选中状态：

// 获取所有分类按钮
const categoryButtons = document.querySelectorAll('.category-link button');
// 遍历绑定点击事件
categoryButtons.forEach(button => {
    button.addEventListener('click', function() {
        // 拿到当前按钮关联的内容块选择器
        const targetSelector = this.getAttribute('data-target');
        const targetContent = document.querySelector(targetSelector);
        
        if (targetContent) {
            // 平滑滚动到对应内容块
            targetContent.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });

            // 切换按钮active选中状态
            categoryButtons.forEach(btn => btn.classList.remove('active'));
            this.classList.add('active');
        }
    })
})

逻辑说明 #

• 关联关系完全通过模板层渲染时绑定的data-target属性维护，后续即使分类id和内容id不再相等，只需要后端传对关联关系、模板填对对应字段，JS逻辑不需要任何修改即可正常运行
• 使用标准的scrollIntoViewAPI实现滚动，不需要手动计算元素偏移位置，兼容现代浏览器，还支持配置平滑滚动效果
• 遍历所有按钮绑定事件，不会出现只能匹配第一个元素的问题

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