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

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

 

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

评论

1 楼 ndscwxc9002 2017-02-16  

必须给你点赞，很好的解决了我的问题！