点击带锚点的网址后，如何让网页位置向下偏移一小段距离

Question

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

当

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

Answer 1

看看这个？把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;
}

Answer 2

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

Answer 3

好吧，这个问题之前也遇到，具体方法写在了这里：锚点链接跳转后位置上下偏移一定位置方法

Answer 4

我觉得也可以这么做：

window.scrollBy(0, -90);