react 单页面跳转页面位置前进页面滚动到顶部返回页面滚动到上次浏览的位置

hdoffice

于 2019-08-16 08:49:06 发布

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： js react 文章标签： react 页面位置 react-router

本文链接：https://blog.youkuaiyun.com/qq_41769728/article/details/99649373

js 同时被 2 个专栏收录

3 篇文章

订阅专栏

react

1 篇文章

订阅专栏

本文介绍了一种在React应用中实现页面滚动位置记忆的方法。通过监听浏览器的前进后退操作，可以使得用户在导航回之前浏览的页面时，页面能够滚动到上次离开时的位置，提供更好的用户体验。代码示例展示了如何使用hashHistory监听页面变化并保存滚动位置。

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

react 单页面跳转页面位置前进页面滚动到顶部返回页面滚动到上次浏览的位置

添加以下代码完美解决

var offsetTop = 0;
var canPoP = true; //push可能会触发pop在这节流
hashHistory.listen(location => {
  if (canPoP) {
    canPoP = false;
    if (location.action !== 'POP') {
      //记住浏览器位置
      offsetTop = getScrollOffset();
    }
    setTimeout(() => {
      //浏览器前进后退
      if (location.action === 'POP') { 
        if (offsetTop > 0) {
            window.scrollTo(0, offsetTop)     
         };
         return 
      }
      window.scrollTo(0, 0);
    }, 5)
    setTimeout(function () {
      canPoP = true;
    }, 500);
  }
})