原文地址: https://www.cnblogs.com/ayseeing/p/3596435.html。 第一种解决方法不错,但是需要考虑div之间遮挡的问题(z-index)。

方法1

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