h5跳转链接后返回，继续浏览当前页的位置不变

最新推荐文章于 2024-07-17 16:48:27 发布

Struggle

最新推荐文章于 2024-07-17 16:48:27 发布

阅读量3k

点赞数

分类专栏： JS小功能文章标签： js javascript

本文链接：https://blog.youkuaiyun.com/weixin_43587872/article/details/104019330

版权

本文介绍如何在H5中实现点击a标签跳转二级页面后，返回时能保留原先浏览的位置，主要涉及JavaScript技术。

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

当前页面点击动态生成的a标签后，跳转到二级页面，从二级页面返回当前页面时，需要定位到之前浏览的位置

	//监听页面跳转
    $(".chunk-3").on("tap", "a", function () {
   
        
        var distance = window.pageYOffset

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Struggle

关注关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue H5列表页面点击跳转看详情返回列表页保持在当前位置

tendernessxy的博客

03-23

2182

vue H5列表页面点击跳转看详情返回列表页保持在当前位置

uniapp h5页面调用客户端，客户端接受参数，跳转其他vue,返回调起页参数值发生变化。

m0_65730686的博客

11-01

488

uniapp h5页面调用客户端，客户端接受参数，跳转其他vue,返回调起页参数值发生变化

参与评论您还未登录，请先登录后发表或查看评论

（带效果动图）H5在详细页点返回，返回时列表页停留在原来的位置

坐等夕阳落time的博客

12-10

4385

H5返回时不刷新页面保持在原来的位置

Vue (H5)跳转到新页面再返回到旧页面保持状态不变(keep-alive)

qq_66953312的博客

07-07

4336

Vue (H5)跳转到新页面再返回到旧页面保持状态不变(keep-alive)

H5页面跳转后再返回，保留原页面输入数据

最新发布

2301_76228232的博客

07-17

501

【代码】H5页面跳转后再返回，保留原页面输入数据。

html返回上一页是固定在原位置,返回上一页，停留在上回浏览的位置

weixin_39551366的博客

06-04

1658

最近做了些H5页面(文章页面)，用户提了些常用的需求：返回上一页，停留在上次浏览的位置搜索了些资料和抄抄前端妹子的代码，实现如下：//返回上次浏览的位置var sortId = $("#sortId").val(); //这篇文章的唯一标识idvar str = sortId + 'scrollTop';////localStorage 方法存储的数据没有时间限制(从localStorage获取...

PC、H5页面从详情页跳回列表页保留滚动条位置

yuhong's blog

03-25

1018

文章目录一、先决条件一、两种情况二、代码情况一情况二1.设置keep-alive2.记录滚动条位置3.获取滚动条位置三、核心代码四、属性一、先决条件 1.vue框架 2.使用keep-alive keep-alive的vue官网链接一、两种情况 1.第一种情况：从列表跳转到详情，详情页只供查看，不需要编辑，因此跳转回去的时候不需要更新页面数据 2.第二种情况：从列表跳转到详情，详情页需要编辑，因此跳转回去的时候需要更新页面数据二、代码情况一 1.设置 keep-alive 2.从列表页跳

通过微信公众号跳转H5页面领取现金红包

qq_35176149的博客

04-22

6583

通过微信公众号跳转H5页面领取现金红包项目目的通过公司微信公众号领取现金奖励面向对象公司内部员工产品逻辑： 1.在微信公众号底部栏加一项“领取奖励”，点击“领取奖励”进入到一个H5页面，页面内容是“输入手机号”与“输入验证码”，“获取验证码”按钮，“领取奖励”按钮。 2.在最开始时，需要将H5页面的地址给到后台人员，配置好，方便获取code。进入页面时，前端人员在地址栏中截取code...

如何打开一个h5链接自动跳转到微信里面打开该链接

06-10

要将 H5 链接自动跳转到微信里面打开，需要在 H5 页面中添加如下代码： ```javascript var ua = navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == "micromessenger") { // 如果是微信...

路由跳转时的页面状态保存

发果叁

09-19

2440

针对 MPA ，大部分情况下有简单的解决方法/平台自动优化，而 SPA 在各平台路由跳转都会丢失状态。所以我们主要分析处理 SPA 的问题。我们还是更倾向于使用 MPA ，MPA 对于各平台的情况，都有着简单的处理方式来解决路由跳转时的页面状态保存这一问题。我们还是更倾向于使用 MPA ，MPA 对于各平台的情况，都有着简单的处理方式来解决路由跳转时的页面状态保存这一问题。

详解h5页面在不同ios设备上的问题总结

12-13

最近在写嵌入到小程序webview的一个h5页面，是一个文章评论的功能，这个过程中，遇到很多兼容性的问题，在不同机型上的表现也很不一致，所以总结了以下这些问题，记录下来，以便以后查看 1、日期问题对于yyyy-mm-dd hh:mm:ss 这种格式在ios系统不识别时间格式化的时候，在浏览器端处理好好的，到了手机端，就变成NAN，或者null，这种情况，是ios系统不能转化这种类型的时间。 let date = new Date('2019-02-28 18:33:24'); // null` 解决方案是，转成 yyyy/mm/dd hh:mm:ss 这种格式就可以了 rep

小说阅读器，记录上次阅读位子。

lzt199931415926的博客

05-03

6009

在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法：localStorage - 没有时间限制的数据存储sessionStorage - 针对一个 session 的数据存储//滚动时保存滚动位置(这里通过localStorage 保存数据，可以根据每个项目的业务逻辑进行调整。)$(window).scroll(function(){ if($(document).scro...

H5在安卓微信浏览器返回时动态获取的数据不会保留（页面刷新了数据初始化了）

Holly1945的博客

04-02

1125

解决思路：判断机型跳转前将动态构建的页面内容缓存在sessionStorage中页面加载时，先从sessionStorage中获取数据 /** * resloveWechatAndroidReturnRefresh * @param {*} querySelector 要缓存的容器 * @param {*} key sessionItem key * @param {*} fetchContent 动态构建页面内容方法 */ function resloveWechatAndroidRet

H5页面不缓存

ze1024的博客

07-18

2642

在这段时间的开发遇到了一个需求，每次打开应用，会缓存以前的一些内容，影响使用体验。解决方式，在html页面上添加三行代码就能搞定代码如下 <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equi...

面试官：如何实现在浏览商品时，进入详情，再返回，列表刷新，滚动条还在之前的位置？

qq_43803987的博客

01-25

1247

当用户点击商品详情时，我们记录当前的滚动条位置，然后在返回列表页时，首先触发列表的刷新操作，然后再将之前记录的滚动条位置重新设置回去。利用Vue Router来管理页面跳转，使用了VueX来存储和恢复滚动条位置。在浏览商品时，点击商品详情，然后返回，要求列表刷新，同时滚动条还在之前的位置，怎么实现？组件更新时，检查是否有之前保存的滚动条位置，并将滚动条位置恢复到之前的状态。页面时，记录当前滚动条位置并将其保存在Vuex store 中。action来保存当前滚动条位置，在返回列表页时，再使用。

html返回上一页是固定在原位置,移动端跳转页面后返回原来的位置

weixin_39561179的博客

06-04

847

引入store.js思路：1.记录页面点击位置的高度，和页面的路径2.获取页面的页码数和商品数3.123返回出去是继续往下加载456//跳转that.go = function(id){try{var obj ={href:location.href,heigth:that.heigth()};//页面分页加载的情况下if(location.href.indexOf('classification...

2017-6-14 关于使用history.go的问题！配合原生应用嵌入H5页面（只有一个webview的的单页应用）返回历史列表记录的问题

hcy0404的博客

06-14

1922

情境描述：在商品查询列表页向下翻到第N个商品位置→点进去看详情→点击返回，回到列表页→列表停在刚才浏览到的第N个商品的位置。解决思路：在跳转到详情页时，记录列表页滚动的距离，详情页返回列表页时，带滚动的参数返回。滚动到相对位置在我的项目中有点特殊情况： 1.返回列表页时，会刷新页面，重新调用ajax。那么返回时的滚动距离是对的，但是滚动过的列表内容不见了。

Vue解决路由切换页面导致位置不变的问题

うさぎの喫茶店

03-03

1029

Vue中使用router切换页面会发现页面切换后位置不变可以在项目的router文件夹中的index.js中添加以下代码 scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 } } 添加后就可以像刚打开一样展示在页面的最顶端官网有更详细的解决方案附上我index.js的全部代码 import Vue from ...

（二）Python+selenium，页面跳转后定位无效解决办法

海绵宝宝的博客

04-06

1449

1、比如从这个后台需要跳转到另一个后台，点击小程序后，在浏览器新增一个页面 2、执行自动化脚本，跳转后，定位报错了 3、此时，可以在跳转前加一个跳转的句柄 allhandle=driver.window_handles driver.switch_to.window(allhandle[1]) 再次执行脚本就可以了，其他也有判断的句柄，都可以参考参考噢 ...