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

最近在开发一个小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 "

时间: 2024-10-12 23:35:02

点击<a>标签,禁止页面自动跳到顶部的解决办法的相关文章

所有浏览器打开后自动打开115.29.163.152/404.html这个网页,然后自动跳转到hao123 解决办法

这几天,电脑所有浏览器打开后自动打开115.29.163.152/404.html这个网页,然后自动跳转到hao123这个网页,网上查询没解决办法.开始自己找,搜索注册表,都无效,最后下载软件HijackThis(HijackThis是一款英文免费软件,由荷兰的一名学生merijn开发.提供其利用业余时间开发的软件供大家下载.HijackThis能够扫描注册表和硬盘上的特定文件,找到一些恶意程序“劫持”浏览器的入口.但要提醒大家注意的是,这些内容也可能正由正常的程序在使用,所以不能草率处理,必须

在angular中一个页面滚动后,打开新页面不在最顶部的解决办法

解决办法:使用$anchorScroll 找到当前页面的controller,在开头中加入以下部分代码,如图所示: $anchorScroll的剩余用法请参考官方文档: https://docs.angularjs.org/api/ng/service/$anchorScroll 原文地址:https://www.cnblogs.com/cnliang/p/10273583.html

Bootstrap浏览器支持下载页面 判断当前IE浏览器小于等于IE8时页面自动跳转到浏览器支持下载页面

Bootstrap浏览器支持下载HTML页面 : <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta chars

jquery 的ajax无刷新上传文件之后,页面还是会莫名的刷新-----解决办法

文件上传用到全局数组: $_FILES 只需要把下面的 <button onclick="post()">提交</button> 改为 <input type="button" onclick="post()" value="提交"/>就不会刷新页面了!!! 参考 http://bbs.csdn.net/topics/391852021 what fuck ... sb html   我在那

Error:控制传输跳过的实例化解决办法

switch红色下划线, Error:控制传输跳过的实例化解决办法 (2012-12-26 13:39:52) 转载▼ 标签: 杂谈   如下: switch(iParam1) { case 0:     CString strResult;   strResult.Format(_T("%s"), iParam2);   break;   case 1:   break; default:  break; } 会提示控制传输跳过的实例化解决办法 因为在case 0:中定义了一个变量s

UltraEdit 标签(tab)不见的3个解决办法

UltraEdit 标签(tab)不见的3个解决办法 2010-11-08 09:19 1042人阅读 评论(0) 收藏 举报 工具c 方法1:点 视图->视图/列表(V)->打开文件标签(E) okgogo2000:  用这个就OK 方法2:[高级/配置]->[工具栏/菜单]->[定制/定制菜单]->弹出菜单配置对话框,展开左侧[菜单]的[视图]项,在这里由[新建菜单/子菜单]创建一个子菜单,然后在右侧的[命令]里找到[打开文件标签]命令,拖到刚才创建的子菜单里即可. 以此

Ajax中主页加载分页面后,分页面js脚本不执行的解决办法

没看懂,稍后再看 Ajax中主页加载分页面后,分页面js脚本不执行的解决办法 最近捣鼓JQuery,其中强大的Ajax系列函数令人印象深刻,所以做项目时毫不犹豫地采用了一下该技术,在主页中动态加载分页面进来,咋看效果 不错,都能实现了第一层次的加载,但深入下去问题就出来了:动态加载进来的页面中外联了js文件,其中的脚本却没有在加载后运行! (脚本在单独浏览该分页面时运行是正常的) 我郁闷了,打开Firefox中的Firebug查看了加载后的主页面中的DOM,所有元素的加载都是正常的啊~ 自己改来

点击a标签触发事件而不跳转页面

有时候需要让a标签像button一样,被点击的时候触发事件而不跳转页面. <html> <body> <a id="a1" href="#none" onclick="a_click(this.id)">Click a1</a> <a id="a2" href="javascript:void(0);" onclick="a_click(thi

meta 标签属性和自动跳转

name属性值的说明如下: <meta name="某个设置值" content="对该设置值进行具体补充说明的信息"> name属性用于在网页中加入一些关于网页的描述信息 name属性值如下: Keywords:告诉搜索引擎,这儿设置的是关键字,多个关键字用逗号隔开 Descriptiong:对本页面的简单描述,搜索引擎会吧这些描述放在搜索引擎的结果下面. Robots:根据对应的content的值得到不同的结果.当content的值为index时告诉