html锚链接怎么调整位置,锚点链接跳转后位置上下偏移一定位置方法

请注意，本文编写于 1621 天前，最后修改于 804 天前，其中某些信息可能已经过时。

因为想把评论区改成无限嵌套，css样式只有第二级评论才会缩进，下面的更低级评论都不会缩进，这样就需要在评论内容前加上@XX的字样，然后点击这个字样，可以通过锚点链接跳转到上一级的评论的位置。

效果是这样的：

然后问题就来了~点击@测试站点，跳转到第一条评论时候，部分内容被上面的固定导航遮挡住了~

你也许也会遇到这样的问题“固定导航遮挡住锚点跳转后的内容”。我找到了两种解决方法。

纯CSS解决

能用css自然不想用js解决，因为在加载方面，css总是先加载，并且速度很快。

typecho的评论HTML结构是这样的：

我们给comment-body加上css.comment-body {

position: relative;

padding-top: 50px;

margin-top: -50px;

}

/*修复评论跳转定位问题*/

完美兼容chrome和Firefox，其他浏览器未测试。

然而对于我的主题，使用后是这样的效果：

可以看出，如果跳转到第二条评论，padding-top 会让第二条评论向下偏移50px，但是把回复按钮给遮挡了！导致回复按钮点击不了。反复调整z-index改变层的顺序，仍然无果(如果有解决方法，盼告知)，只好使用js来解决

使用javascript去调整scroll值if (window.location.hash.indexOf('#') >= 0) {

$('html,body').animate({

scrollTop: ($(window.location.hash).offset().top - 50) + "px"

},

300);

}; //主要修复评论定位不准确BUG

$('#comments a[href^=#][href!=#]').click(function() {

var target = document.getElementById(this.hash.slice(1));

if (!target) return;

var targetOffset = $(target).offset().top - 50;

$('html,body').animate({

scrollTop: targetOffset

},

300);

return false;

}); //主要修复评论定位不准确BUG

这样总算解决了，兼容主流浏览器。

handsome下个版本会更新这个问题的。如果你有更好的办法，盼告知~

参考文章