点击<a href="#">阻止自动跳转到顶部方法

最近开发web项目，遇到一个问题 ，就是在<a>标签加href="#"，并增加onclick事件，页面会自动在点击该标签绑定的元素时，自动跳转到页面顶部，在网上寻求了一番解决办法后，总结下来有两种比较常用的解决办法：

（1）： <a href="###" onclick="">

通常我们的写法是href=“#”，默认的锚是#top 也就是网页的上端，所以浏览器会在点击事件后跳转到顶部。此时用“##”或者“###”等都可以实现不回到页面顶部，为什么呢，因为浏览器不认识啊，就默认不处理了。即此时只会响应点击事件。

（2） <a href="javascript:void(0)" onclick="">

这种方式也可以避免回到顶部。我们可以使用void操作符指定超级链接，如javascript：void(document.form.submit())。表达式会被计算但是不会在当前文档处装入任何内容，void(0)计算为0，但在JavaScript上没有任何效果，也就是说 <a href="javascript：void(0)">的效果同<a href="javascript：void(1)">的效果是一样的。 关键是只要知道 void是j avascipt
自身的操作符，它表示的是只执行表达式，但没有返回值！ 如<a href="javascript:void(document.form.submit())">此时点击事件就会提交一个表单。

javascript:void(0)要慎用： 要执行某些处理，但是不整体刷新页面的情况下，可以使用void(0),但是在需要对页面进行refresh的情况下，那就要仔细了。其实我们可以这样用<a href="javascript:void(document.form.submit())">，这句话会进行一次submit操作。那什么情况下用void(0)比较多呢，无刷新，当然是Ajax了，看一下Ajax的web页面的话，一般都会看到有很多的void(0)，所以在使用void(0)之前,最好先想一想,这个页面是否需要整体刷新。

点击<a href="#">阻止自动跳转到顶部方法的更多相关文章

1. 用户点击确认登录，自动跳转下面地址得到code

   PHP获取微信openid 简单教程 WEB   2014年10月29日  10868浏览  6评论 获取code https://open.weixin.qq.com/connect/oauth2/ ...

2. 35.HTML--网页自动跳转 5种方法

   网页自动跳转 5种方法 利用HTML标记(META中的REFRESH属性) 用HTML标记,就是用META的REFRESH标记,举例如下: <meta http-equiv=refresh co ...

3. window.loaction.href 不自动跳转的问题

   window.location.href无效/不跳转的原因分析   1.源代码: <a href="javascript:void(0);" onclick="mo ...

4. QQ和微信点击链接或扫描自动跳转外部浏览器

   微信上进行的网页宣传.游戏传播.APP下载各类活动很多,但是各位朋友肯定经常会遇到一些特殊需求,网页需要在手机默认浏览器打开而不是微信内置浏览器.这个问题怎么解决呢? 另一种情况是你的网址被恶意举报被 ...

5. flask配置选项中的TRAP_HTTP_EXCEPTIONS会阻止自动跳转

   参考:http://www.pythondoc.com/flask/config.html Flask 对象的 config 属性. 这是Flask自身放置特定配置的地方,同时也是flask扩展模块放 ...

6. 解决Jupyter notebook安装后不自动跳转网页的方法

   在安装完Jupyter notebook后,有童鞋说出现了各种不友好的问题,鉴于此情况,个人先随手写出以下三种情况,并给出解决方法: 题外建议:请使用谷歌浏览器为默认浏览器 一.对于弹不出浏览器的解决 ...

7. 微信小程序页面3秒后自动跳转

   setTimeout() 是属于 window 的方法,该方法用于在指定的毫秒数后调用函数或计算表达式. 语法格式可以是以下两种:   setTimeout(function () { // wx.r ...

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

   最近在开发一个小web的时候想给一个按钮增加一个弹出dialog功能,但是发现点击按钮后页面总是自动滚动至顶部,这点从用户体验上来讲是极其不爽的,于是开始跳进google大池寻求解决办法.网上的 ...

9. 黄聪：如何阻止iframe里引用的网页自动跳转

   今天做了个网页,要在网页里设置一个iframe,然后套用其他的网站.使用http://luanqi-cat.blogbus.com 这个网址的时候,出现了莫名其妙的问题,我的网页居然会强制自动跳转到这 ...

随机推荐

1. \r、\n、\r\n的区别-转载

   文章地址: https://blog.csdn.net/qq_40395278/article/details/81199281 https://blog.csdn.net/qq592304796/a ...

2. 13-Java-JSP知识梳理

   一.JSP了解 JSP(java server pages,服务器页面),可理解为HTML+ Java = = JSP,它可生成动态的HTML(拼标签).是以.jsp为后缀的文件, 内容是以标签为主体 ...

3. 当你工作与生活迷茫时可以来看看 shuke

   青春是用来奋斗的 很多人在还没工作的时候,总感觉自己有能力会混的不错.毕业几年后,发现社会跟学校完全是两个世界.不经常思考的人,惰性总会让人得过且过混日子,不思考未来的路怎么走,就等于你安于现状,接受 ...

4. HTML文字标签

   <h1>标题标签,总共六个等级,不能创造标签,只有预定义好的标签才可以被浏览器解析 <br>换行标签,没有内容可以修饰也称为空标签 <p>段落标签</p&gt ...

5. STL初探

   关于STL的一些东西 感言: 学C++不学STL函数库的人可能都是... 有点问题 头文件<algorithm>的一些东西 sort,快排: 这是个初学者必需掌握的东西,及其好用,因为方( ...

6. [linux] Ubuntu18.04 安装mysql密码不对

   安装 安装过程可以说是非常简单了 sudo apt-get install mysql-server 然后看看有没有启动成功 systemctl status mysql 看到状态是 running就 ...

7. [lua]紫猫lua教程-命令宝典-L1-03-01. 闭包

   L1[闭包]01. 函数的传递赋值 没什么说的 1.函数作为变量来看 可以轻松的声明 相互赋值 2.函数变量本质是 一个内存指针 所以函数变量的相互赋值不是传递的函数本身 而是指向这个函数的内存地址 ...

8. nginx 定义：响应头和请求头

   1) 响应头 add_header 例如: add_header Cache-Control no-cache; add_header Access-Control-Allow-Origin *; a ...

9. MaxM2引擎各种人物触发脚本

   捡起物品触发@PickUpItem[@PickUpItem]#if#actSENDMSG 5 [%s]在[%m(%x,%y)]捡起物品[<$STR(E2)>] 精炼成功触发@REFINEM ...

10. 【转载】Java容器的线程安全

    转自:http://blog.csdn.net/huilangeliuxin/article/details/12615507 同步容器类 同步容器类包括Vector和Hashtable(二者是早期J ...