空链接中的href属性含有“#” 引起页面跳动 的几种解决方法

空链接中的href属性含有“#” 引起页面跳动 的几种解决办法

     页面中使用空链接时,通常点击该空链接不会打开一个新页面,只是借助这个它触发一个点击事件,进而完成一系列的js操作。

     以前空链接的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>。

         没什么可说的,至于为什么这样写可以做到防页面跳动,自己去探索吧。

 

     当然肯定还有其他的处理方法。如果你也闲得蛋疼的话,告诉我吧,大虾们!!