锚点定位向下偏移

正常写一个锚点定位的元素,点击锚点元素,默认是到页面的顶部,但是如果顶部有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);
         }
     }
  }
});

 

posted on 2019-06-26 10:13  sjpqy  阅读(411)  评论(0编辑  收藏  举报

导航