点击锚点让定位偏移顶部
最近遇到的问题是：网页多出需要设置锚点，但网站顶部导航采用float:fixed绝对定位，浮动于顶部。那么问题来了，锚点定位必然定位于页面顶部，这样一来就会被浮动的导航遮挡。
在stackoverflow看到的一个方法是在主体内容前加一个暗锚：
将锚点进行偏移，并隐藏占位：
.target-fix { position: relative; top: -44px; // 偏移值 display: block; height: 0; overflow: hidden; }
这个也是最直接的方法。
我采用的是相对简洁的方法：对于现代浏览器如果支持css的:target声明,可以这么设置:
article.a-post:target{ padding-top:44px; }
对于IE这等落后的浏览器是不支持的.另外可以使用js去调整scroll,比如使用jQuery:
$(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); } } } });
可以使用jquery-hashchange:https://github.com/cowboy/jquery-hash…
绑定window.onhashchange事件:
$(function(){ /* 绑定事件*/ $(window).hashchange(function(){ var target = $(location.hash); if(target.length==1){ var top = target.offset().top-44; if(top > 0){ $(‘html,body’).animate({scrollTop:top}, 1000); } } }); /* 触发事件 */ $(window).hashchange(); });
点击锚点让定位偏移顶部
