JS实现极简锚点跳转

使用锚点定位是最简单、最直接的方法。你只需要给提问的容器加上一个唯一的 id，然后在点击“收起”时，用 JS 触发这个锚点即可。

这里有两种最简单的写法，你可以根据需要选择：

方案一：使用 location.hash（标准的浏览器锚点跳转）

这是最符合“锚点”概念的写法，直接修改浏览器的地址栏 Hash，页面会瞬间直达顶部。

1. HTML 结构

给你的提问容器加上一个 id（例如 my-question）：

<!-- 提问的外层容器加上 id -->
<div id="my-question" class="message-box collapsed">
    <div class="content-text">
        <!-- 这里是上百行的内容 -->
    </div>
    <!-- 收起/展开按钮 -->
    <button onclick="toggleContent()">收起</button>
</div>

2. JavaScript 逻辑

在“收起”的代码执行后，直接加上这一行代码：

function toggleContent() {
    const container = document.getElementById('my-question');
    
    // 切换收起状态（假设你用 css 类控制高度）
    container.classList.toggle('collapsed');
    
    // 判断如果是收起状态，直接跳转到锚点
    if (container.classList.contains('collapsed')) {
        window.location.hash = '#my-question'; 
    }
}

方案二：使用 scrollIntoView()（最推荐，不污染URL）

如果你不想让浏览器的地址栏后面多出一个 #my-question 的尾巴，用下面这行 JS 代替，它也是基于 DOM 锚点定位的，极其简单。

function toggleContent() {
    const container = document.getElementById('my-question');
    container.classList.toggle('collapsed');
    
    if (container.classList.contains('collapsed')) {
        // 直接“无动画”瞬间滚回该元素顶部
        container.scrollIntoView({ behavior: 'auto', block: 'start' });
    }
}

为什么这两种方法最省心？

1. 无需计算高度：不需要用 JS 去算当前滚了多少像素，浏览器会自动找 id="my-question" 的元素顶部对齐。
2. 代码量极少：核心代码只有一行，非常容易维护。