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

最新推荐文章于 2024-06-24 14:16:58 发布

羽化尘1

最新推荐文章于 2024-06-24 14:16:58 发布

阅读量1.3k

点赞数

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

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

版权

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

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

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)
  }