有时候开发网站前端代码的时候,需要用到空链接,即代码中<a href=“#”>,这样用#号的,一般像这种情况是在锚点的时候才会用#号做跳转。
锚点最初作用是当网页太长,而需要使用跳转到各个部分时的代码,随着技术的发展,像这样的功能,大多会使用JS动画的方式控制到某个点,使用最广范的就是单页设计,这种网页注重动画效果,如我们设计开发的网站煜华科技,以是单页与多页相结合的站点,链接为:
http://www.adhesionled.com/index.php
所以随着技术的升级,锚点的作用也是越来越小。
但是有时候又非常方便,因为不用什么技术即可实现跳转到局部点。
然后有的开发者就会想这种空链接用得多了,究竟对SEO有没影响呢?
按道理来说是没有影响的,因为搜索引擎只会分析整页的内容,不会按锚点去分析内容,还有大部分的HTMl标题是会给过滤了的。
但采用这种方式,然后加JS做跳转,这样对SEO影响是有影响的,就是说JS跳转肯定比A链接跳转对搜索引擎更不友好。
所以按SEO出发,尽量不要用空链接。
分析了对SEO的影响后,再对用户对空链接的操作方面的影响,
如<a href=“#”>,这样用户点击后会返回顶部,如果写成href="###"这样的话,就不会有任何动作。
那么超链接中 href='#' 和 href='###' 的区别是什么呢?
简单地说,
如果想定义一个空的链接,又不跳转到页面头部,可以写href="###"。
详细地说,
'#' 是有特定意义的,如果 '#' 后有内容会被认为是一个标签而从页面找到相应标签跳转到该处,找不到时会跳到页首;
'###' 是一个无意义的标签指定,也就是一个 '#' 和不存在的标签 '##' 的组合,页面中找不到命名为 '##' 的 <a> 时该链接就不会发生跳转,也就不会导致执行 onclick 中的内容时突然发生页面跳到页首的问题;
"###"主要是防页面跳动。从其他意义来说,只是一种使用者习惯,如果你愿意,可以随便找一个跳转不到的标签作为命名。
说白了"###" 就是一个不是锚点的字符串,浏览器找不到也不会跳到页首,原理就是依赖了网页的报错机制,找不到就不做处理。以前空链接的href属性通常使用"#"来填充,但当页面出现滚动条时,点击空链接,页面会跳动到页首,给人的感觉很不爽。
为什么当用"#"填充空链接时会出现页面跳动的现象?
原因是"#"被默认为锚点"#top",即跳转到本页页首。查找了下资料, 以下为自己尝试过的3种解决办法:
1、使用3个#号,<a href="###" onclick="">链接</a>。
为什么要用3个呢,不得其解。也没有查资料了,本来就是一个让人蛋疼的问题。
试了下使用两个#,ff和chrome下可以防页面跳动,IE8下页面依然跳页首(其他IE没有测试,应该也会跳动吧)。
3个#,这几个浏览器就都能防页面跳动了。当然你如果不闲麻烦的话,使用4个#、5个#甚至更多#时,页面跳动现象也可解决。
2、使用javascript:void(0),<a href=" javascript:void(0) " onclick="">链接</a>。
这种写法曾经给我留下过深刻的印象,可让我吃过大苦头啊。
它在各个浏览器下均可正常工作(这里的正常工作,指防止页面跳动)。但在IE6下它会防止页面整体刷新(ff、chrome、IE8下不会出现这样的状况,其他浏览器就不得而知了),所以你的onclick事件中如果有页面整体刷新这样的操作时,最好还是不要使用这种写法了。
当时就是因为涉世不深,导致了调此bug到深夜的痛苦经历,最终是在师傅的指导下解决了此bug。
也许正因为它有防页面整体刷新的操作,在ajax的交互中用的比较多。至于javascript:void到底是个什么玩意,自己去baidu或google吧。懒得在这贴了。
3、 在onclick事件函数中使用return false,<a href=" # " onclick="return false">链接</a>。没什么可说的,至于为什么这样写可以做到防页面跳动,自己去探索吧。
介于以上分析原来在各浏览器中这个链接也是会有各种不同展示效果,这对于普通用户来说可能会没什么在意的,但是对于程序员的来说绝对是程序的BUG,不能不去处理啊,所以空链接在各个角度分析,能不使用,还是尽量不要使用哦