前端页面在手机浏览器显示时锚点失效的解决
2016-06-14 18:11
1081 查看
前端第三方的弹窗控件,点击弹窗的关闭按钮时,有一个锚点的跳转:
但是这个效果只在PC上调试生效,在手机浏览器上,能看到地址栏里有#tag,但是页面没有跳转到指定的位置。
尝试了其他的跳转方式,比如:
注意到在点击完关闭按钮后,画面有一瞬的闪烁。怀疑是弹窗消失和滑动到指定锚点冲突。
于是尝试在锚点跳转处加上延时操作:
再调试时,手机上的页面就能过正常跳转到指定的锚点。
location.hash="tag";
但是这个效果只在PC上调试生效,在手机浏览器上,能看到地址栏里有#tag,但是页面没有跳转到指定的位置。
尝试了其他的跳转方式,比如:
document.getElementById('tag').scrollIntoView()都是不能跳转到指定的锚点。
注意到在点击完关闭按钮后,画面有一瞬的闪烁。怀疑是弹窗消失和滑动到指定锚点冲突。
于是尝试在锚点跳转处加上延时操作:
setTimeout(function(){ location.hash="tag"; },500);
再调试时,手机上的页面就能过正常跳转到指定的锚点。
相关文章推荐
- html5 web数据存储
- SEO
- 异步流程控制:7 行代码学会 co 模块
- [译] React 入门
- 如何优雅处理前端异常?
- 用jquery修复在iframe下的页面锚点失效问题
- 前端jquery部分很精彩
- 深入探讨前端框架react
- Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
- JQuery 实现在同一页面锚点链接之间的平滑滚动
- jQuery实现平滑滚动到指定锚点的方法
- jquery利用拖拽方式在图片上添加热链接
- JQuery简单实现锚点链接的平滑滚动
- JavaScript返回网页中锚点数目的方法
- 自己动手写的javascript前端等待控件
- 前端必备神器 Snap.svg 弹动效果
- JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
- jquery根据锚点offset值实现动画切换
- 一张Web前端的思维导图分享