锚链接偏移

锚点定位偏移没解决之前,点击后锚点区域居于body顶部。

如果网站上有些元素是 absolute 或者 fixed 在顶部的,那么,这些元素就会遮住锚链接的元素。

因此,就需要利用css或者js来使锚链接元素偏移。

方法1:

利用 padding-top 和 margin-top 来解决

<a href="#box">box</a>
<div class="box" id="box">1<br />2<br /></div>
.box{
   padding-top:50px;
   margin-top:-50px;  
}

利用padding-top将锚点上移50px,再用margin-top将内容上移50px,修复锚点区域和内容区域padding-top产生的不必要的偏移。

 

方法2:

利用css3的 :target 

.box:target{
   padding-top:50px;
}

:target声明只支持现代浏览器,IE浏览器支持 IE9+

 

方法3:

可以在元素前面新添加一个元素,设置高度,本元素设置margin-top负值,其实现原理类似方法1.

 

方法4:

使用js解决

$(function(){
  if(location.hash){
     var target = $(location.hash);
     if(target.length==1){
         var top = target.offset().top-44;
         if(top > 0){
             $('html,body').animate({scrollTop:top}, 1000);
         }
     }
  }
});

 

 

 

类似博客 http://segmentfault.com/q/1010000000124208

posted @ 2014-03-12 15:27 破男孩 阅读(...) 评论(...) 编辑 收藏