用hash解决微信开发无刷新切换页面返回时滚动条会回到顶部

最新推荐文章于 2024-04-10 14:06:05 发布
最新推荐文章于 2024-04-10 14:06:05 发布
阅读量9.6k 收藏 2
点赞数 2
分类专栏： 微信企业号开发 文章标签： 微信 hash 页面在原来的位置 history pushState 滚动条返回顶部
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26598303/article/details/51189235
版权
在微信开发中，通过hash实现无刷新切换页面时，返回会导致滚动条回到顶部。解决方案包括使用scrollable container进行局部滚动，避免show/hide操作引起的重绘，以及利用HTML5的history.pushState方法。但在实际项目中，由于兼容性问题，特别是安卓设备，可能仍会出现滚动条回到顶部的问题。
摘要由CSDN通过智能技术生成

1.==》2.==》3.==》4.

最低0.47元/天 解锁文章
写Bug
关注
专栏目录
一篇文章 - 轻松入门微信小程序
zyh1841474614的博客
01-10 3912
以前学习微信小程序开发时候的笔记,希望能对大家有帮助
VueCli3.x全栈开发-微信朋友圈(node/express/mongodb/vuecli3.x)
weixin_43964148的博客
08-20 1212
1.项目演示 2.express 搭建服务器 2.1.初始化项目 $ npm int 2.2.安装自动重启工具nodemon $ npm install -g nodemon 2.3.修改package.json中的script: "scripts": { "start":"node server.js", "server":"nodemon server.js" ...
微信android返回上一页位置,解决微信内置浏览器返回上一页强制刷新问题方法...
weixin_36192634的博客
05-29 1120
微信内置浏览器在返回上一页面，且上一页面包含AJAX代码时，页面就会被强制刷新，极度影响用户体验。而我们想要的效果是：返回上一页面时，页面还停留在原来的状态，AJAX获取到的数据还在，滚动条也在原来的位置。BINGO~通过HTML5的history API + 缓存可以做到这一点。执行原理：1.0、通过history API的 history.pushState或 history.replaceS...
微信返回跳到前一个页面不刷新实现
weixin_37901118的博客
11-30 2038
主页面  子页面 主页面跳转到子页面的链接使用a标签 并且加上target="_blank" 即新窗口打开 同时主页面头部添加缓存 ios可以 安卓目前不支持 返回机制不同
微信小程序返回上一页，不刷新需求
天龙的博客
10-27 554
微信小程序返回上一页，不刷新需求
微信浏览器 点击返回上一页 页面不刷新
weixin_35172526的博客
08-11 1031
出现这种情况的场景是： 用户点开链接，跳转到答题页面，再点击提交到结果页。 现在从结果页，直接点击微信浏览器的返回左箭头，发现会返回答题页面，这个页面不管有缓存答案还是不缓存，都需要刷新之后，再次提交才可以，否则就获取不到结果集，就直接跳转到没有结果集的错误页面。 问题的关键点是：点击微信自带的浏览器的上一页箭头，页面不刷新。 暂时没有直接解决这个问题。 直接在结果页面...
解决微信返回按钮到上一页页面不刷新的问题
热门推荐
彩虹
02-02 1万+
解决微信返回按钮到上一页页面不刷新的问题 window.onpageshow = function(event){ //event.persisted 判断浏览器是否有缓存, 有为true, 没有为false if (event.persisted) { window.location.reload(); }
android顶部滚动条返回到,用hash解决微信开发无刷新切换页面返回时滚动条会回到顶部...
05-27
您可以使用JavaScript中的`window.location.hash`属性来实现无刷新切换页面时滚动条保持在原来的位置。具体来说，您可以在页面加载时检查`window.location.hash`的值，如果存在，则将滚动条定位到相应的元素上，如下...
$router.back()返回上一级页面，保存的滚动位置出错的问题，bug记录。
weixin_42217982的博客
06-16 490
$router.back()返回上一级页面，保存的滚动位置出错的问题
安卓微信window.history.go返回上一页后页面刷新，无法记录浏览位置的解决方案
ClassicSong的博客
04-17 3786
移动端页面，顶部左上角返回上一页按钮很常见，如下图所示： 按钮所在页面为目标页面，点击按钮返回到上一页，实现代码如下： window.history.go(-1) //或者 window.history.back(-1) 大部分浏览器、客户端，都是可以完美跳转，且会记住用户在上一页浏览的位置。在滑屏加载下一页的大列表页中，当滑屏加载了N页之后，看到可心的标题，随即进入到详细页，浏览完详细页后，...
微信浏览器点击系统返回，安卓返回会重载页面回到页面顶部，iOS则返回则会保留之前浏览位置的解决方法...
weixin_34249678的博客
06-29 1835
后续补充： 页面css设置了height： 100%，来避免使用fixed定位弹窗引起的部分机型兼容问题，因此会在返回的时候回到页面顶部，补充解决办法： 在弹窗出现的时候在设置100%高度，并让文档滚动到之前滚动的位置，弹窗关闭的时候取消高度限制，body滚动还原 在近期做的一个移动端分享到微信的页面时，遇到了这样一个现象： 在A页面...
微信内置浏览器返回上一页，页面被刷新
weixin_30363981的博客
03-18 1778
问题描述：前些日子，有同事做微信服务号项目，遇到一个比较纠结的问题，window.history.back()在微信浏览器中会刷新页面。具体场景是这样的，列表页，下拉分页加载数据，滑到第3页的某条楼盘，进入详情页后，返回列表页，页面停留在第1页的最后一个楼盘；预期结果：从详情页返回列表页，页面仍然停留在第3页的某条楼盘；问题分析：在微信内置浏览器中，window.history.back()类似于...
《解决微信内置浏览器返回上一页强制刷新问题方法》
p15097962069的博客
09-25 666
《解决微信内置浏览器返回上一页强制刷新问题方法》
解决微信内置浏览器 返回上一页停留位置 强制刷新问题 的最简单方法(适用于本页无ajax请求) ...
weixin_34240657的博客
10-20 786
在跳转链接前 记录当前滚动条距离st 存入sessionStorage跳转后返回 读取st 重新赋值 // 在微信内执行 platform.isWeixin && this.getSt(); }, methods: { getSt() { if (window.sessionStor...
微信web端返回自动刷新
Angular_的博客
03-31 3128
在ajax或者dwr提交的url后面加时间戳。 例如 http_request.onreadystatechange = funcName（函数名）; http_request.open(“GET”, url, true); 比如url是test .jsp 那么我们在它后面加上?time=new Date(); 即url=test.jsp?time=new Date(); 2 ：在u
Vue 移动端（H5）项目怎么实现页面缓存（即列表页面进入详情返回后列表页面缓存且还原页面滚动条位置）keep-alive缓存及清除keep-alive缓存
最新发布
wocwin的博客
04-10 2079
Vue 移动端（H5）项目怎么实现页面缓存（即列表页面进入详情返回后列表页面缓存且还原页面滚动条位置）keep-alive缓存及清除keep-alive缓存
html 返回上一页强制刷新,微信返回上一页强制刷新问题
weixin_29157533的博客
06-04 484
问题描述微信公众号，用户正浏览一个分页加载的列表，翻到第N页点击进入详情页，返回后页面刷新回到了顶部。要求返回用户之前浏览的位置。问题分析安卓以及IOS部分机型的微信返回，类似于window.location = xxx强制刷新。而IOS部分机型微信返回，是window.history.back()返回历史页面，不会刷新页面(js也不会再次执行)。解决思路1.分页加载时，用一个变量存入ajax加载...
微信开发-服务器验证-hash加密
weixin_41758407的博客
08-25 237
package cn.sharing.www.controller; import cn.sharing.www.util.HashUtil; import cn.sharing.www.util.MD5Util; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web....
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值