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

最新推荐文章于 2024-07-23 03:56:56 发布
最新推荐文章于 2024-07-23 03:56:56 发布
阅读量631 收藏
点赞数 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
关注
专栏目录
JavaScript教程带你快速入门
OIqng的博客
09-03 2375
JavaScript 简介 JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。 JavaScript 是基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。 JavaScript 用法 HTML 中的脚本必须位于 标签之间。 脚本可被放置在 HTML 页面的 和 部分中。 <script>标签 <script> 和 </script> 会告诉 JavaScript 在何处开始和结
HTML: 内联框架 超链接 链接分类 文本标签 列表
weixin_56266471的博客
06-15 777
## 内联框架##### 1. 作用：使用内联框架可以引入一个外部的页面##### 2. 语法使用iframe 来创建一个内联框架``` 像图片一样 需要指定引入的页面 ```##### 3. 属性：**src** : 指向一个外部页面的路径，可以使用相对路径**width**: 定义iframe的宽度，单位px**height**:定义iframe 的高度, 单位px**name**: 定义iframe的名称,``` ...
点击超链接禁止跳到顶部解决办法
machinecat0898的专栏
12-23 4727
今天豆芽碰到一个问题。我在使用ajax实现与服务器异步传输的时候需要点击一个超链接。但是这个超链接位于网页底部，所以当我每次点击超链接的时候虽然实现了与服务器的通信。但是，页面一下子跳转到了顶部，感觉不是很好。下面是豆芽的解决办法。 1、一般我使用超链接是点击超链接禁止跳到顶部解决办法，如果你的也是这样的话，可以将 href="#" 改为 href="###" ，试试，是不是就可以啦。还有一种办
点击超链接防止跳到页面顶部的方法
12-28 746
把href的值设置成 "javascript:void(0);"或者"###"等
a标签锚点 点击向上偏移解决方案
98程序员
08-28 1359
场景：写博客时打算采用vue官网的方式布局，技术栈也是vue，分head,aside和主要内容的main模块 左边为aside模块，两个a链接 当点击a链接时main模块滑动到对应id的盒子 但是因为head时采用position: fixed;固定定位 当点击a链接时 head元素是脱离文档流的 下面的aside包括main就向上偏移 变成这样了： head挡住了一部分 相信很多人都用overflow：hidden尝试恢复文档流，当时没用，这可能是a链接的特殊 解决方式就是在包裹aside和main的
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
整理几个禁止a标签点击
weixin_41188472的博客
07-23 181
手机整理了六种禁止a标签点击的方法，包括使用 javascript:void(0)、href="#" 并阻止默认行为、按钮元素、CSS 禁用、JavaScript 禁用及综合方法，帮助开发者更灵活地控制链接行为。 手机整理了六种禁止a标签点击的方法，包括使用 javascript...
通过href简单实现点击a链接跳到页面中指定的地方
09-28
本文将详细介绍如何通过`href`属性来实现点击a链接跳到页面中指定的地方，这是一种称为内部链接或锚点链接的机制。 首先，让我们了解`<a>`标签的基本结构。`<a>`标签用于创建超链接，其基本语法如下： ```html <a ...
谈谈前端性能优化-面试版
loveX001的博客
11-14 228
当我们去面试的时候，很大概率会被面试官问这么一个问题：你有尝试过对项目做性能优化吗？或者你了解哪些性能优化的方法？听到这个问题的你可能是这样的：似曾相识但又说不清楚，往往只能零散地说出那么几点，难以做到有条理的回答。那么，本文就带你简单了解前端性能优化的几个主要方面，旨在抛砖引玉。请求过程中一些潜在的性能优化点：总结： 深入理解请求的过程是前端性能优化的核心。优化核心首页案例学习代码压缩就是压缩一些在文本文件中有意义，但是在中不显示的字符，包括空格，制表符，换行符等，还有一些其他意义的字符，如**注释**也
个人网页设计常用代码集合.doc
09-25
将链接的`href`值设为`javascript:void(null)`，可以避免用户点击空链接时页面跳回顶部： ```html <a href="javascript:void(null)">链接文本</a> ``` 4. **防止网页被嵌入框架**： 通过在JavaScript中检查`...
a标签禁止点击_禁止a标签跳转的几个方案
weixin_39962394的博客
11-28 1177
在进行网站ajax请求的时候，用到了大量的a标签，其中有个href属性，用来跳转连接的。但是站点本身并不需要跳转，而是用onclick调用了某个函数或者方法。如此一来，防止a标签本身的行为很有必要了。1.使用 javascript:return fasle本来使用javascript:return fasle的方式屏蔽了a标签的跳转，但是有个不可预料的结果，在谷歌浏览器调试没问题，但是到了火狐浏览...
通过JavaScript来禁止a标签，不让其被点击
hello world
01-13 3781
只要将a的disabled属性修改为true，此时页面上的a链接标签就无法点击了。
阻止a链接点击跳转刷新
qq_68862343的博客
03-29 877
就是给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...
a标签禁止点击
li_zai的博客
05-14 1746
<a href="#" onclick="return false" style="cursor: default;"><img src="images/banner.jpg" alt=""></a> 鼠标默认样式cursor: default;
a标签置灰不可点击
热门推荐
野蛮秘籍
05-06 9万+
a标签的title属性可以实现鼠标放上去显示信息的功能<a title="编辑" href ="javascript:return false;" onclick="return false;" style="cursor: default;"><i class="edit" style="opacity: 0.2"></i></a>加入href =”javascript:return false
禁止a标签的跳转功能
Tssit的个人博客
07-18 3312
以前一直用&lt;a href="#"&gt;的方式禁止a标签跳转，这样其实是不可以的，因为没点击一次a标签就会触发一次刷新的操作 阻止a 标签的默认跳转行为! &lt;a href ="javascript:return false;"&gt;禁止点击 &lt;/a&gt; //或者 &lt;a href ="javascript:void(0);"&gt;禁止点击 &amp
使用<a>标签创建一个目录，点击目录中的章可以跳转到当前页面的指定位置。 具体要求： 1. ”月相“和章节标题使用h标签； 2. 目录使用<a>标签； 3. 图片大小为600x600； 4. 每章之间有分割； 5. 页面底部有链接，点击链接可以回到页面顶部的”月相“。
最新发布
09-28
<a href="#" id="back-to-top" onclick="scrollToTop()">返回顶部</a> <script> function scrollToTop() { window.scrollTo(0, 0); document.getElementById("back-to-top").style.display = "block"; } //...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值