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

羽化尘1

于 2022-11-17 11:06:03 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_36709949/article/details/127900026

本文介绍了一种使用JavaScript和localStorage来记录并恢复网页滚动位置的方法。通过监听页面滚动事件，并在页面加载时平滑滚动到之前的位置，实现了良好的用户体验。

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

核心就是记住上一次浏览的位置，记住滚动条所处的位置

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

window.scrollTop(0, 0);

// 滚动到 上次访问位置
  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)
  }