点击<a>标签，禁止页面自动跳到顶部的解决办法

DBear

浏览: 232290 次
性别:
来自: 上海

最近访客更多访客>>

oracle1234

进击的小白

chw751039

Sdky

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

前端技术

浏览器脚本 JavaScript Google HTML

最近在开发一个小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从此干净了~~

除此方法之外还有提出：

定位到 <html> 上，document.getElementsByTagName( "html ")[0].style.overflow= "hidden "
或者 <html id= "scroll ">
然后调用地方写document.getElementById( "scroll ").style.overflow= "hidden "

但是依次方法并未成功，也可能是我写的不对，这个留作以后再做验证。

分享到：

如何使按钮和文字排在一行且对齐（CSS之di ... | Java常用关键字总结（待续）

2010-08-30 15:21
浏览 24784
评论(1)
分类:Web前端
查看更多

1 楼 uchaoxi 2017-01-02

谢谢作者分享的经验，非常有用！

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论