javascript - 点击带锚点的网址后，如何让网页位置向下偏移一小段距离-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

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

天蓬老师 2017-04-10 12:42:58

[JavaScript讨论组]

1282

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

当

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

天蓬老师

欢迎选择我的课程，让我们一起见证您的进步~~

全部回复(3)

巴扎黑2017-04-10 12:44:58 3楼

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

赞 +0

添加回复

高洛峰2017-04-10 12:44:58 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...

赞 +0

添加回复