js实现刷新页面，实现滚动条还停留在上次访问的位置，同时用户在列表页进入详情之后，回来还在之前的浏览位置 |
您所在的位置：网站首页 › 控制面板打开了怎么返回上一页 › js实现刷新页面，实现滚动条还停留在上次访问的位置，同时用户在列表页进入详情之后，回来还在之前的浏览位置 |
|
其实不管是第一个还是第二个，核心都是 记住上一次浏览的位置，记住滚动条所处的位置 不过第一种情况有一个 快捷的处理方式 就是 // 当页面刷新之后 重新回到上次滚动条 所处的位置 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中也是那样 关注我 持续更新 前端 知识 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |