锚点定位向下偏移

正常写一个锚点定位的元素，点击锚点元素，默认是到页面的顶部，但是如果顶部有fixed定位，就会被遮住，这时就希望锚点区域距离上面有一个距离。

因此就需要使用css或者js来让锚点定位向下偏移。

方法一、

使用 margin-top 和 padding-top 来解决。

<a href="#box">box</a>

<div class="box" id="box">
    1<br />2<br />
</div>

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

利用padding 将定位向下移50px, 再利用margin向上移动50px， 修复锚点区域与内容区域因padding-top 产生的距离。

方法二、

使用 css3 的新属性  :target

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

:target 只支持现代浏览器，IE9+  

canIuse 参考

 

方法三、

利用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);
         }
     }
  }
});