锚链接偏移

锚点定位偏移没解决之前，点击后锚点区域居于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