前端切换页面时,保存滚动位置

适用若依框架,适用Vue
在A页面时滚动到某位置,切到B页面,再切回A页面时保留滚动的位置。
原理:切出A页面时记录下高度,切回A页面时恢复高度。

  // 切出页面时会调用 
  beforeRouteLeave(to, from, next) {
    // data里记一下scroll变量,scroll:0
    this.scroll = window.scrollY; // 切出去时记录下高度
    next();
  },
  // 切回页面时会调用
  activated() {
    this.$nextTick(() => {
      setTimeout(() => {
        window.scrollTo({
          top: this.scroll,   // 切回来时恢复高度
          // behavior: 'smooth' 可选,滑动恢复,增加动画效果
        });
      }, 0);
    });
  },

如果不是整个页面滚动而是某个Div里滚动的话,就这么写:

  beforeRouteLeave(to, from, next) {
    // data里记一下scroll变量,scroll:0
    this.scroll = document.getElementsByClassName("chat-content")[0].scrollTop;		// Div的class名称
    next();
  },
  activated() {
    this.$nextTick(() => {
      setTimeout(() => {
        document.getElementsByClassName("chat-content")[0].scrollTop = this.scroll;
      }, 0);
    });
  },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值