锚点失效解决办法

  最近碰到锚点无效的问题,表现为点击锚点后无法定位到对应的锚点位置。经过检查发现,原来是为了布局统一,将锚点display设置为none隐藏起来了,隐藏起来的锚点是无法定位的,哪怕锚点只有1px高度和1px宽度,这个一定要设置,要不在页面上没有占用位置,锚点将会失效,无法对应的位置。

  示例如下


<!--<style>a.anchor{display:none}</style>
<style>a.anchor{display:none;width:1px;height:0;overflow:hidden}/*锚点都无效*/</style>-->
<style>a.anchor{width:1px;height:1px;overflow:hidden}/*一定要占位,哪怕1px*/</style>
<a href="#a1">a1</a> <a href="#a2">a2</a> <a href="#a3">a3</a>
<div style="height:1000px">a1<a name="a1" class="anchor">&nbsp;</a></div>
<div style="height:1000px">a2<a name="a2" class="anchor">&nbsp;</a></div>
<div style="height:1000px">a3<a name="a3" class="anchor">&nbsp;</a></div>

 


原创文章,转载请注明出处:锚点失效解决办法

评论(1)Web开发网
阅读(371)喜欢(0)不喜欢(0)HTML/CSS兼容/XML