美文网首页Web前端之路前端开发Web 前端开发
问题总结之关于点击a标签自动跳到顶部解决方案,以及原因。

问题总结之关于点击a标签自动跳到顶部解决方案,以及原因。

作者: 路家小白 | 来源:发表于2016-07-08 19:48 被阅读2551次

    最近在做个人的一个小网站遇到不少的问题。怕以后忘记,所以记录下来,与你们一起分享一下下,等做好了,在拿给你们看看,好不好?嘻嘻。

    1.问题

    想必大家也遇到过吧,就是当你点击一个a标签的时候,会自动跳转到浏览器的顶部(当然如果浏览器不出现滚动条,是看不到这个效果的)。

    2.出现的原因

    遇到问题我们就要解决他们,还要知道其中的原因,才能进步,那么我就来说下,产生的原因,大家都知道a标签有个锚作用,就是给href属性#后面添加一个ID,那么你点击a标签的时候,就会自动跳到有这个ID的地方,那么当#后面什么也不加的时候,a标签就不知道要跳哪里,所以默认就是浏览器的顶部。跟着这个思路就出现以下两种的解决办法。

    3.解决的办法

    1.在a标签的href属性中写三个#(三个以上也行的)。

    <a href=“###”><a/> 

    这样子a标签就就找到##,也就不会跳转了,但是不推荐使用这种方法,因为这样子,在url地址栏中就会多###。

    2.在a标签的href属性中写javascript:void(0);

    <a href="javascript:void(0)"><a/>

    大家都知道有http: file:等协议,其实javascript:也是一种协议,当你点击a标签的时候,他会自动执行javascript:,后面的内容;就比如,javascript:alert(1),那么就会弹出1,void(0)的返回值是undefined,所以执行javascript:void(0),简单的理解就是什么也没执行,执行了一个空的函数(这样子理解好像不准确)所以就不会跳转了。

    我在前端也一个小白,如果有什么理解不正确的地方,希望大家指出,我们共同进步,好不好?哈哈。么么哒,爱你们!

    相关文章

      网友评论

        本文标题:问题总结之关于点击a标签自动跳到顶部解决方案,以及原因。

        本文链接:https://www.haomeiwen.com/subject/lvdrjttx.html