点击带PHP参数的同页链接时如何防止页面跳转到顶部

问题根因 #

你遇到的跳转顶部问题本质是点击a标签默认触发页面全量刷新，哪怕指向当前页，页面重新加载后都会回到初始顶部位置，之前的尝试无效的原因分别是：

• preventDefault/return false 只是阻止了默认跳转行为，没有配套参数传递逻辑，相当于点击后没有任何后续操作，自然达不到传参的需求
• 链接末尾加/只是改变了URL格式，不会影响页面刷新的默认行为

解决方案 #

根据你的业务需求选择对应的方案即可：

方案1：需要全页刷新获取后端渲染的新内容

点击链接时记录当前滚动位置，页面加载完成后自动回滚到对应位置：

1. 给a标签绑定点击事件记录滚动高度：

// 如果a标签是静态渲染的，直接绑定即可
document.querySelector('#chatLink').addEventListener('click', () => {
  sessionStorage.setItem('lastScrollY', window.scrollY);
});

// 如果a标签是动态生成的，改用事件委托绑定
document.addEventListener('click', (e) => {
  if(e.target.id === 'chatLink') {
    sessionStorage.setItem('lastScrollY', window.scrollY);
  }
});

2. 页面加载完成后读取记录的位置回滚：

window.addEventListener('load', () => {
  const lastScrollY = sessionStorage.getItem('lastScrollY');
  if(lastScrollY) {
    window.scrollTo(0, parseInt(lastScrollY));
    sessionStorage.removeItem('lastScrollY');
  }
});

方案2：不需要全页刷新，仅需要传递参数更新局部内容

使用AJAX异步传参，完全不会触发页面刷新，自然不会跳转顶部：

document.addEventListener('click', (e) => {
  if(e.target.id === 'chatLink') {
    e.preventDefault();
    // 获取链接中的参数地址
    const requestUrl = e.target.getAttribute('href');
    // 发送异步请求
    fetch(requestUrl)
      .then(res => res.text())
      .then(renderData => {
        // 此处替换为你自己的局部内容更新逻辑，比如更新聊天框、用户信息等
        document.querySelector('#your-content-container').innerHTML = renderData;
      })
  }
});

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