保持原先的滚动位置

场景:

一个商品页面,一直滑 划到中间 然后点进去详情页面了 然后再返回 怎么让他保持在中间的位置

方案1:传商品id 做锚点定位

vue中实现锚点定位以及平滑滚动到指定位置_vue中锚点跳转和页面滚动锚点定位-CSDN博客

javascript 复制代码
    goAnchor(id) {
      var anchor = document.getElementById(id);
      // chrome
      document.body.scrollTop = anchor.offsetTop;
      // firefox
      document.documentElement.scrollTop = anchor.offsetTop;
      // safari
      window.pageYOffset = anchor.offsetTop;
    },
	方法二:
	 goAnchor(id) {
      var anchor = document.getElementById(id);
      anchor.scrollIntoView();
    },

方案2:

从详情页面跳转回来的时候 使用 this.$router.back 不刷新商品页面

方案3:使用keep-alive

vue组件缓存之keep-alive正确使用姿势 (zhihu.com)
vue使用keep-alive详解------实现数据缓存不刷新、修改值后刷新、相同参数区分等_keep-alive :include="cachedviews"方法切换页面如何让部分内容不刷新-CSDN博客

方案4:

滚动行为 | Vue Router (vuejs.org)

相关推荐
FungLeo2 小时前
成为全栈·React 管理后台篇·总复盘:从“接口能调通”到“后台值得使用”
前端·react.js·前端框架·项目复盘·成为全栈
Csvn3 小时前
并发模式:让渲染学会排队、插队和让路
前端
可乐鸡翅yeah_3 小时前
新手梳理:M3U8 线上问题,哪些是前端锅,哪些是后端锅
前端·ios·音视频·实时音视频·m3u8·音视频在线播放
Flynt3 小时前
Linear 用 1000 个 PR 换掉 styled-components,我写了 200 个按钮,把这笔账复现了一遍
前端·css·preact
JavaGuide4 小时前
NVIDIA 又开源了!这次给 AI Agent 加上权限管控
前端·后端
excel4 小时前
prisma 如何处理数据库竞态
前端·数据库·后端
莪_幻尘6 小时前
Skill 体检:30 个 Skill 全凭感觉?体检器先自曝了 8 个“假 0 分
前端·人工智能·llm
风骏时光牛马6 小时前
AI模型综合能力评测:性能、指令遵循与多场景实测对比
前端
Frag0ut6 小时前
Chrome与Chromium内核浏览器在Windows 11上的新特性全景解析
前端·chrome·windows·web安全·chromium·gemini ai·playready drm
hiahiahia1236 小时前
实现完整 Tool Dispatcher
开发语言·前端