点击<a>标签,禁止页面自动跳到顶部的解决办法
2016-02-18 13:35
369 查看
最近在开发一个小web的时候想给一个按钮增加一个弹出dialog功能,但是发现点击按钮后页面总是自动滚动至顶部,这点从用户体验上来讲是极其不爽的,于是开始跳进google大池寻求解决办法。网上的办法有很多,但是唯独下面这个生效了,转来收藏。
"平时开发的HTML表单,链接通常会使用<a href="#" onclick="openWnd();">Open new window</a>控件,但这种方法如果是链接到本页面,用来执行一段JS脚本的话,我们一般不希望用户在点解链接后页面滚动到顶部(如果有滚动条的话),可以通过修改上述将链接属性href来实现:即将href="#"改为href="###",这样用户点击链接执行JS脚本后,滚动条就不会自动跳到TOP了。"
后来就想为什么这么改了就不跳了?然后把href换成 "#X",发现依然可以实现阻止滚动的效果。所以应该是浏览器会把 "#" 当作是一种页面跳转的口令,接到这个口令就会把页面滚动到原始位置,但是只要把这个改成浏览器没有办法识别的名称,那么它就会把这个口令ignore了。
NOTE:后来发现IE6这个神奇的浏览器连"##"都能识别,所以如果你要兼容浏览器,那还是用"###"吧。。。
2010-10-11 更新
在最近开发的网站中,一直使用上述的"#X"方法解决页面跳动的问题。但是这样解决页面虽然不跳了,url却会变得异常的难看,所以一直想找个方法替代它。后来在一次山寨之旅中意外的找到了它——
href="javascript:void(0)"
url从此干净了~~
链接地址:http://dbear.iteye.com/blog/750825
"平时开发的HTML表单,链接通常会使用<a href="#" onclick="openWnd();">Open new window</a>控件,但这种方法如果是链接到本页面,用来执行一段JS脚本的话,我们一般不希望用户在点解链接后页面滚动到顶部(如果有滚动条的话),可以通过修改上述将链接属性href来实现:即将href="#"改为href="###",这样用户点击链接执行JS脚本后,滚动条就不会自动跳到TOP了。"
后来就想为什么这么改了就不跳了?然后把href换成 "#X",发现依然可以实现阻止滚动的效果。所以应该是浏览器会把 "#" 当作是一种页面跳转的口令,接到这个口令就会把页面滚动到原始位置,但是只要把这个改成浏览器没有办法识别的名称,那么它就会把这个口令ignore了。
NOTE:后来发现IE6这个神奇的浏览器连"##"都能识别,所以如果你要兼容浏览器,那还是用"###"吧。。。
2010-10-11 更新
在最近开发的网站中,一直使用上述的"#X"方法解决页面跳动的问题。但是这样解决页面虽然不跳了,url却会变得异常的难看,所以一直想找个方法替代它。后来在一次山寨之旅中意外的找到了它——
href="javascript:void(0)"
url从此干净了~~
链接地址:http://dbear.iteye.com/blog/750825
相关文章推荐
- [算法学习]树的广度遍历
- 8.在Tachyon运行MapReduce
- ionic apk文件重签名
- 7.Tachyon命令行使用
- ios8 UITableView设置 setSeparatorInset:UIEdgeInsetsZero不起作用的解决办法(去掉15px空白间距)
- 图的邻接矩阵c语言表示(无向网)---《数据结构》算法7.2
- Pro Git 中文版 -- 目录
- Could not find a storyboard named 'Main' in bundle NSBundle
- JZOJ 1756.得分
- [算法学习]后缀表达式转二叉树
- POJ-3292-Semi-prime H-numbers-数筛法
- Android手机重启的核心代码
- 字符编码的历史演变
- sqlite 取得结果集行号的方法
- IOS 单选框
- test
- [坑]微信支付首次支付成功,第二次调用失败
- 从运行原理及使用场景看Apache和Nginx
- nyoj 38 布线问题 克鲁斯卡尔
- 6.Tachyon文件存储以及读写过程