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

最新推荐文章于 2023-03-29 16:18:28 发布
最新推荐文章于 2023-03-29 16:18:28 发布
阅读量613 收藏
点赞数 1
分类专栏： web

"平时开发的HTML表单，链接通常会使用<a href="#" οnclick="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 "

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


cocosgirl
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS中如何实现点击a标签返回页面顶部的问题
11-26
<a>点击</a> </body> </html> 上面的代码点击后会回到页面顶部。 解决问题： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</tit
css - 如何禁用 ＜a＞ 标签点击，让 ＜a＞ 标签实现 disabled 禁用效果（鼠标无法触发点击事件）
高级前端工程师
02-06 1万+
css中的a标签无disable属性,如何禁用a标签的点击事件css 禁用 a 标签vue项目禁用a标签的点击事件css里a标签禁用css中如何禁用a标签按钮CSS-禁用a标签css如何禁止a标签跳转怎样禁用css中a标签按钮css如何让a标签不可用使用纯css禁用html中a标签无需JavaScript怎样禁用css中a标签按钮css如何让a标签不可用css如何禁止a标签跳转css 控制a标签 禁用html的a标签disabled禁用处理jquery怎么禁用a标签css如何设置a标签不可点击CSS-but
通过JavaScript来禁止a标签，不让其被点击
滕青山博客
01-13 3558
只要将a的disabled属性修改为true，此时页面上的a链接标签就无法点击了。
阻止a链接点击跳转刷新
qq_68862343的博客
03-29 747
就是给a标签的href写空事件javascript:;但是第一个a标签点击后div刚出现立马就没有了；而细心点就会发现是a标签点击后页面刷新了；给两个a标签绑定的同一个click事件；改变div的display为block；马虎点的童鞋可能要迷茫很久都找不到原因；一部分童鞋始终不知道怎么阻止a标签跳转；有一个宽高100px背景为红的div；第二个a标签点击后div会正常显示；这是一个所有做前端都会遇到的问题；避免给a标签添加click事件；总还有一部分喜欢钻研的童鞋；下面就是来带你脱离苦海的；
HTML 的 a标签禁止点击
tuoniaoxs的博客
05-07 1万+
HTML 的 a标签禁止点击 前言 在HTML中，要实现超链接需要使用标签 <a></a> 这个标签有多个属性，如href属性、target属性等。 在程序开发中，有时候我们需要实现a标签不可点击功能，但是a标签的属性中并没有disabled 这时，要实现a标签不可点击，需要用到css的知识。 正文 主要方法： 给a标签设置css样式属性 pointer-events <a href="" style="pointer-events:none;">//none属性值代表元
如何禁用a标签的点击事件
weixin_43215482的博客
03-08 1万+
首先说明： a标签 是没有disable 属性的 。 如果想用disable 禁止a标签的点击事件，也是可以实现的； 1、 a标签 要用 disable 属性，必须和 pointer-events属性一起使用 ，例子 如下： HTML 部分代码： &lt;a class="praise"&gt;赞&lt;/a&gt; JS 代码： $(".praise").attr("disa...
夸克顶部变味tqZ偶联和罕见的$$ \ Delta F = 1 $$ <math> <mrow> <mi>Δ</ mi> <mi> F </ mi> <mo> = </ mo> < mn> 1 </ mn> </ mrow> </ math>进程
03-22
<mrow> <mi> q </ mi> <mo> = </ mo> <mi> u </ mi> <mo>，</ mo> <mi> c </ mi> </ mrow> </ math>），从而导致$$ t \ rightarrow q Z $$ <math> <mrow> <mi> t </ mi> <mo>→</ mo> <mi> q </ mi> ...
js判断滚动条是否已到页面最底部或顶部实例
03-16
主要介绍了js判断滚动条是否已到页面最底部或顶部的原理与方法,以实例的形式详细分析了js实现返回顶部功能所涉及的各种技巧,并对相关知识点进行了总结归纳,需要的朋友可以参考下
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
08-28
主要介绍了vue项目中在使用vue-router切换页面的时候滚动条自动滚动到顶部的实现方法，一般使用Window scrollTo() 方法实现，本文给大家简单介绍了crollTop的使用,需要的朋友可以参考下
点击超链接禁止跳到顶部解决办法
machinecat0898的专栏
12-23 4665
今天豆芽碰到一个问题。我在使用ajax实现与服务器异步传输的时候需要点击一个超链接。但是这个超链接位于网页底部，所以当我每次点击超链接的时候虽然实现了与服务器的通信。但是，页面一下子跳转到了顶部，感觉不是很好。下面是豆芽的解决办法。 1、一般我使用超链接是点击超链接禁止跳到顶部解决办法，如果你的也是这样的话，可以将 href="#" 改为 href="###" ，试试，是不是就可以啦。还有一种办
jquery禁用a标签,jquery禁用按钮click点击
Alex ♋ 博客
05-18 2万+
jquery禁用a标签方法1 01 $(document).ready(function () { 02         $("a").each(function () { 03             var textValue = $(this).html()
避免刷新页面，自动跳回到页面顶部的办法
abcabc5153的博客
02-17 1884
可能我们会经常遇到这种情况，当页面内容比较多的时候，当用户执行操作执行一次页面回送后，页面又重新从顶端开始显示，用户不得不重新拖动滚动条回到先前的位置，这会给用户带来很不友好的体验。这时只需在asp.net中的顶部<page>标签里加一句 MaintainScrollPositionOnPostback="true" 即可 <%@ Page Language="C#"...
a标签置灰不可点击
热门推荐
weixin_38098192的博客
05-28 3万+
a标签的title属性可以实现鼠标放上去显示信息的功能：&lt;a title="编辑" href ="javascript:return false;" onclick="return false;" style="cursor: default;"&gt;    &lt;i class="edit" style="opacity: 0.2"&gt;&a
点击超链接防止跳到页面顶部的方法
12-28 715
把href的值设置成 "javascript:void(0);"或者"###"等
a标签中有点击事件禁止跳转
IT-小猩猩
07-20 1830
a href="javascript:void(0);" onclick="js_method()" a href="javascript:;" onclick="js_method()" a href="#" onclick="js_method();return false;"
<div id="app"> <!-- 顶部快捷导航start --> <div class="shortcut"> <div class="w"> <div class="fl"> <ul> <li>购物商城欢迎您！ </li> <li> <a href="#">请登录</a> <a href="#" class="style-red">免费注册</a> </li> </ul> </div> <div class="fr"> <ul> <li><a href="#">我的订单</a></li> <li class="spacer"></li> <li> <a href="#">我的购物</a> <i class="icomoon"></i> </li> <li class="spacer"></li> <li><a href="#">商城会员</a></li> <li class="spacer"></li> <li><a href="#">企业采购</a></li> <li class="spacer"></li> <li><a href="#">关注商城</a> <i class="icomoon"></i></li> <li class="spacer"></li> <li><a href="#">客户服务</a> <i class="icomoon"></i></li> <li class="spacer"></li> <li><a href="#">网站导航</a> <i class="icomoon"></i></li> </ul> </div> </div> </div> <!-- 顶部快捷导航end <img src="img/logo.png" alt="">--> <div class="car-header"> <div class="w"> <div class="car-logo"> <b>购物车</b> </div> </div> </div> </div>帮我改写成组件化
最新发布
06-10
<li><a href="#">关注商城</a> <i class="icomoon"></i></li> <li class="spacer"></li> <li><a href="#">客户服务</a> <i class="icomoon"></i></li> <li class="spacer"></li> <li><a href="#">网站导航...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值