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

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

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),简单的理解就是什么也没执行,执行了一个空的函数(这样子理解好像不准确)所以就不会跳转了。


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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,870评论 1 92
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,288评论 19 139
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,792评论 0 17
  • 女儿计划周二去看朋友家新买的猫,准备做一盒饼干带过去,正好家里新买的面包机等着她开工,所以昨天下午自己去就近的人人...
    ivy_gu阅读 381评论 0 0
  • 倘若生命是一条河流,那么注定有无数的花瓣飘落,倘若时间是一页黄纸,那么一定有众多的笔迹留下。一丝点缀,一份沉淀,才...
    沐秋流阅读 513评论 0 0