0

如大家在 segmentfault 当前版本所见到的,点击锚点链接后,展示的内容会因为 header 区的浮动而被遮盖。
示例链接 http://segmentfault.com/q/10100000001...

屏幕快照 2012-10-03 上午11.00.35.png

可用的方法之一就是拉伸锚点的边距,但这会影响整个列表的距离,不知道大家有什么好的方法不?

fenbox 5.9k
2012-10-03 提问
4 个回答
5

已采纳

看看这个?把a的top做点offset试试?
http://stackoverflow.com/questions/49...

代码实现

参照 stackoverflow 的做法,在主体内容前加一个暗锚

<a class="target-fix" name="a-<?php $a->id(); ?>"></a>
<artivle>主体内容...</article>

将锚点进行偏移,并隐藏占位:

.target-fix {
    position: relative;
    top: -44px; // 偏移值
    display: block;
    height: 0;
    overflow: hidden;
}
4

我也发现了这个问题,对于现代浏览器如果支持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...

0

我觉得也可以这么做:

window.scrollBy(0, -90);

撰写答案

推广链接