如何修改CSS时避免页面自动回到顶部？（用Live Server与VS Code自动保存）

方法一：禁用Live Server的全页刷新（推荐） #

Live Server默认会在文件变更时触发全页刷新，这就是页面回到顶部的核心原因。修改设置让它仅注入CSS变更即可：

• 打开VS Code设置（快捷键：Windows/Linux按Ctrl+,，Mac按Cmd+,）
• 在搜索框输入Live Server: Full Reload，取消勾选该选项

之后修改CSS时，Live Server会直接更新页面样式，不会重载整个页面，自然也就不会回到顶部。

方法二：用JS记录并恢复滚动位置（适配全页刷新场景） #

如果需要兼容全页刷新的情况（比如修改HTML时），可以在页面中添加以下代码，自动记录刷新前的滚动位置并恢复：

// 刷新前记录滚动位置
window.addEventListener('beforeunload', () => {
  sessionStorage.setItem('scrollPosition', window.scrollY);
});

// 页面加载后恢复位置
window.addEventListener('load', () => {
  const scrollPos = sessionStorage.getItem('scrollPosition');
  if (scrollPos) {
    window.scrollTo(0, parseInt(scrollPos));
    sessionStorage.removeItem('scrollPosition');
  }
});

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