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