如何阻止点击侧边栏链接时页面滚动到顶部？

这个问题太常见啦——当你点击带查询参数的链接（比如?p=a）时，浏览器会默认刷新页面并滚动到顶部，这确实很影响体验。我给你准备了两种实用方案，按需选择：

方案一：无刷新加载内容（推荐，体验更流畅） #

核心思路是用JavaScript阻止默认的页面跳转，通过AJAX加载对应内容，同时更新URL保持历史记录，这样页面就不会刷新，自然也不会滚到顶部了。

步骤&代码示例： #

1. 首先确保你的页面有一个主内容容器，比如：

<div id="main-content">
  <!-- 这里是页面的主要内容 -->
</div>

2. 添加JavaScript处理点击事件：

// 获取侧边栏所有链接
const sidenavLinks = document.querySelectorAll('.sidenav a');
const mainContent = document.getElementById('main-content');

// 给每个链接绑定点击事件
sidenavLinks.forEach(link => {
  link.addEventListener('click', function(e) {
    // 阻止默认的页面跳转行为
    e.preventDefault();
    
    // 获取链接的查询参数（比如?p=a）
    const queryString = this.getAttribute('href');
    
    // 更新浏览器URL，保留历史记录（这样前进后退按钮还能用）
    history.pushState({}, '', queryString);
    
    // 用AJAX请求对应页面的内容
    fetch(queryString)
      .then(response => response.text())
      .then(html => {
        // 解析返回的HTML，提取主内容部分
        const parser = new DOMParser();
        const doc = parser.parseFromString(html, 'text/html');
        const newContent = doc.getElementById('main-content').innerHTML;
        
        // 更新主内容区
        mainContent.innerHTML = newContent;
        
        // 可选：如果需要保持当前滚动位置，这行可以留着（其实无刷新本来就不会动）
        // window.scrollTo(0, window.scrollY);
      })
      .catch(err => console.error('加载内容出错:', err));
  });
});

// 处理浏览器前进/后退按钮
window.addEventListener('popstate', () => {
  const currentQuery = window.location.search;
  fetch(currentQuery)
    .then(response => response.text())
    .then(html => {
      const parser = new DOMParser();
      const doc = parser.parseFromString(html, 'text/html');
      mainContent.innerHTML = doc.getElementById('main-content').innerHTML;
    });
});

3. 后端小调整（可选但建议）：
   如果你的后端支持，可以检查请求头里的X-Requested-With: XMLHttpRequest，如果是AJAX请求，只返回主内容片段而不是整个页面，这样加载更快。

方案二：必须刷新页面时，记住滚动位置 #

如果因为项目限制必须刷新页面，那我们可以在点击链接前把当前滚动位置存在localStorage，页面加载完成后再恢复位置。

代码示例： #

// 点击侧边栏链接时，保存当前滚动位置
const sidenavLinks = document.querySelectorAll('.sidenav a');
sidenavLinks.forEach(link => {
  link.addEventListener('click', () => {
    localStorage.setItem('savedScrollPos', window.scrollY);
  });
});

// 页面加载完成后，恢复之前的滚动位置
window.addEventListener('load', () => {
  const savedPos = localStorage.getItem('savedScrollPos');
  if (savedPos) {
    window.scrollTo(0, parseInt(savedPos));
    // 恢复后移除存储的位置，避免下次刷新不必要的恢复
    localStorage.removeItem('savedScrollPos');
  }
});

这个方案简单直接，但有个小局限：如果用户新开标签页或者手动刷新，localStorage里的位置可能还会生效，但大多数场景下完全够用。

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