JavaScript实现切换内容后返回锚点位置的方法

不需要统计点击次数，直接通过判断元素的类名状态就能实现需求——当内容被隐藏（也就是父元素的active类被移除）时，让页面滚动到按钮的位置。

修改后的代码 #

let more = document.querySelectorAll('.custom-read-more');
for (let i = 0; i < more.length; i++) {
  more[i].addEventListener('click', function () {
    const parentElement = this.parentNode;
    // 执行类名切换逻辑
    parentElement.classList.toggle('active');
    this.classList.toggle('active');
    
    // 判断是否进入隐藏状态：父元素没有active类时
    if (!parentElement.classList.contains('active')) {
      // 滚动到当前按钮的位置，smooth实现平滑滚动，block控制对齐方式
      this.scrollIntoView({ 
        behavior: 'smooth', 
        block: 'start' // 让按钮顶部对齐视口顶部，可选center/end
      });
    }
  });
}

关键细节说明 #

• 用this代替more[i]：在点击事件的回调里，this就是当前被点击的按钮，比循环变量更直观可靠。
• 判断类名状态：!parentElement.classList.contains('active')表示“父元素没有active类”，这时候就是内容被隐藏的状态，触发滚动。
• scrollIntoView()方法：这是浏览器原生的滚动API，不用自己计算位置，简单好用。behavior: 'smooth'是平滑滚动效果，去掉的话会瞬间跳转到目标位置；block: 'start'确保按钮顶部和视口顶部对齐，符合用户预期。

如果你的页面有指定锚点（比如某个固定的标题位置），也可以把this.scrollIntoView(...)换成锚点元素的滚动，比如：

document.getElementById('your-anchor-id').scrollIntoView({ behavior: 'smooth' });

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