84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
如大家在 segmentfault 当前版本所见到的，点击锚点链接后，展示的内容会因为 header 区的浮动而被遮盖。示例链接 http://segmentfault.com/q/10100000001...
当
可用的方法之一就是拉伸锚点的边距，但这会影响整个列表的距离，不知道大家有什么好的方法不？
欢迎选择我的课程，让我们一起见证您的进步~~
看看这个？把a的top做点offset试试？http://stackoverflow.com/questions/49...
参照 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(); });
关于window.onhashchange事件:https://developer.mozilla.org/en-US/d...
好吧，这个问题之前也遇到，具体方法写在了这里：锚点链接跳转后位置上下偏移一定位置方法
看看这个？把a的top做点offset试试？
代码实现http://stackoverflow.com/questions/49...
参照 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(); });关于window.onhashchange事件:
https://developer.mozilla.org/en-US/d...
好吧，这个问题之前也遇到，具体方法写在了这里：锚点链接跳转后位置上下偏移一定位置方法