网站FAQ手风琴组件点击展开时页面自动上滚问题

你现在的手风琴是靠锚点+CSS :target 伪类实现的展开/折叠，点击<a>标签的锚点链接时，浏览器会触发默认的锚点跳转行为，自动把id和锚点匹配的元素滚动到视口顶部，这就是页面自动上跳的根源，和展开动画本身没关系。

给两个可直接用的方案，按需选就行。

方案1：最小改动纯CSS修复（保留现有:target实现逻辑） #

不用改HTML和现有交互逻辑，只要给.accordion-item加一行CSS属性，抵消锚点滚动的偏移即可，适配你当前FAQ模块80vh的高度设置：

.accordion-item {
  /* 原有样式全部保留，加下面这行 */
  scroll-margin-top: 15vh;
}

这个值可以根据你页面实际的固定导航栏高度、FAQ模块位置微调，保证点击后问题项不会被顶到视口外就行。

方案2：JS控制类名（彻底消除锚点滚动问题，扩展性更好） #

完全移除锚点跳转逻辑，用JS切换类名控制展开，不会触发任何默认滚动，还能顺手实现「同一时间只展开一个问题」的标准手风琴效果：

1. 替换原有CSS中和:target相关的样式，把伪类选择器换成自定义的active类：

/* 删除原来的三行:target相关样式，替换成 */
.accordion-item.active .answer {
  max-height: 200px;
}

.accordion-item.active .up {
  display: none;
}

.accordion-item.active .down {
  display: block;
}

2. 修改HTML中所有手风琴链接的href属性，去掉锚点，避免触发默认跳转：

<!-- 把所有类似<a class="accordion-link" href="#qestion1">的标签改成 -->
<a class="accordion-link" href="javascript:void(0)">

3. 在页面底部加一段原生JS，绑定点击事件控制类名切换：

document.addEventListener('DOMContentLoaded', () => {
  const links = document.querySelectorAll('.accordion-link');
  links.forEach(link => {
    link.addEventListener('click', (e) => {
      e.preventDefault();
      const currentItem = link.closest('.accordion-item');
      // 下面三行是实现同时只开一个的手风琴效果，不需要可以删掉
      document.querySelectorAll('.accordion-item').forEach(item => {
        if (item !== currentItem) item.classList.remove('active');
      });
      currentItem.classList.toggle('active');
    })
  })
})

注：你代码里的id拼写有小错误，qestion正确拼写是question，不影响当前功能但后续维护建议修正。

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