咨询：FAQ区块展开时页面跳转至顶部，如何实现仅向下展开？

问题根源 #

页面跳转顶部主要源于两个问题：

• body 设置了固定高度 65vh，同时用 Flex 布局垂直居中 main。当隐藏内容展开后，main 高度增加超出 body 的固定高度，浏览器会自动调整滚动位置导致跳顶。
• 使用 display: none 隐藏内容时，元素完全不占据空间，显示时突然插入布局，引发页面重排导致滚动跳动。

具体修复方案 #

1. 调整 Body 布局，去掉固定高度

修改 CSS 中 body 的样式，让高度自适应内容，同时保持页面居中效果：

body {
  min-height: 100vh; /* 确保至少占满视口高度 */
  width: 100vw;
  overflow-x: hidden;
  padding: 2rem 0; /* 添加上下内边距避免内容贴边 */
}

main {
  width: 40%;
  margin: 0 auto; /* 水平居中 */
}

2. 替换 display: none 为平滑过渡的隐藏方式

用高度过渡替代 display: none，既保留隐藏效果，又能实现平滑展开，避免布局突然变化：

/* 替换原来的 .hide-display */
.hide-display {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* 展开后的样式 */
.text.show-display {
  max-height: 200px; /* 设置足够容纳内容的最大高度 */
}

3. 完善交互逻辑（若使用 JavaScript）

如果用点击事件切换内容显示状态，确保不会触发默认跳转行为：

document.querySelectorAll('.question').forEach(question => {
  question.addEventListener('click', () => {
    const text = question.closest('section').querySelector('.text');
    text.classList.toggle('hide-display');
    text.classList.toggle('show-display');
  });
});

最终效果 #

调整后，FAQ 内容会向下平滑展开，页面不会再跳转到顶部，同时保持原有的布局风格。

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