js实现刷新页面，实现滚动条还停留在上次访问的位置，同时用户在列表页进入详情之后，回来还在之前的浏览位置

本文链接：https://blog.csdn.net/yunchong_zhao/article/details/119351688

本文介绍如何使用JavaScript记录用户的滚动位置，并在用户返回页面时恢复该位置。通过利用cookie或本地存储，可以确保良好的用户体验，即使在页面刷新或短暂离开后也能保持阅读进度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

其实不管是第一个还是第二个，核心都是记住上一次浏览的位置，记住滚动条所处的位置

不过第一种情况有一个快捷的处理方式就是

// 当页面刷新之后重新回到上次滚动条所处的位置

window.scrollTop(0, 0);

还有第二种情况就是我们从当前页面跳走的时候，点击返回的时候还希望是上次访问的位置
这个时候就需要使用 cookie 或者本地缓存用来缓存那个滚动的位置了

// 滚动到 上次访问位置
  const scrollToView = () => {
    let scrollHeight = localStorage.getItem('scrollHeight');
    if(scrollHeight) {
      setTimeout(() => {
        window.scrollTo({
          top: scrollHeight,
          behavior: "smooth"
        });
      }, 300)
    }
  }
  // 监听用户滚动位置
  const listenScrollTop = () => {
    const debounce = () => {
      let timer = null;
      return () => {
        if(timer) {
          clearTimeout(timer);
        }
        timer = setTimeout(() => {
          localStorage.setItem('scrollHeight', window.pageYOffset ||
    			document.body.scrollTop || document.documentElement.scrollTop)
        }, 500)
      }
    }
    this.scrollFn = debounce();
    window.addEventListener('scroll', this.scrollFn)
  }

其实上面的都用到了 window.scrollTop 这个方法使滚动条滚动到相关位置，建议想了解童鞋还是去了解了解比较号。

其实在vue中的话有一个keep-alive的组件能缓存当前的状态，但我们有的时候可能不是单页应用或者哪个组件需要实时刷新，就不适合使用keep-alive了同理在 react中也是那样

关注我持续更新前端知识