隐藏内容后页面跳转，如何阻止该异常滚动行为？

问题原因 #

当网格从展开状态切换为折叠状态时，页面总高度大幅降低，浏览器的**滚动锚定（Scroll Anchoring）**机制会自动调整滚动位置，试图让当前视口中的元素保持可见，这就导致了页面跳转到底部的现象。

方案一：禁用滚动锚定 #

通过CSS属性直接阻止浏览器的滚动锚定行为，无需修改JavaScript代码，操作最简单。

修改网格容器的CSS：

#grid {
  background: black;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  overflow-anchor: none; /* 添加该行禁用滚动锚定 */
}

如果需要全局禁用该行为，也可以给body添加属性：

body {
  padding: 72px;
  overflow-anchor: none;
}

方案二：手动保存并恢复滚动位置 #

在修改网格状态前后，手动记录并恢复页面的滚动位置，适合需要精细控制滚动行为的场景。

修改JavaScript代码：

const toggleButton = document.getElementById("toggle-button")
const grid = document.getElementById("grid")
let isCollapsed = false

toggleButton.addEventListener("click", () => {
  // 保存当前滚动位置
  const currentScrollPos = window.pageYOffset || document.documentElement.scrollTop;
  
  isCollapsed = !isCollapsed
  isCollapsed ? grid.classList.add("collapsed") : grid.classList.remove("collapsed")
  
  // 恢复之前的滚动位置
  window.scrollTo(0, currentScrollPos);
})

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