锚点href不能正确显示

Question

我正在尝试从当前页面/contact.html导航到另一个带有锚标签的页面部分。我在这里遇到的问题是，结果视图与容器的起始位置不对应。在网上搜索时，我怀疑这是因为网站组件是动态加载的，并且没有固定的图像滑块高度。

尽管如此，我还没有找到任何解决这个问题的方法。希望有人能在这个问题上帮助我。

注意:如果在index.html页面本身中使用锚定标记，那么它可以很好地工作。

有关代码参考和更好的说明，请参阅以下链接。这正是我面临的问题。

​

<a href="http://themehats.com/themes/jango/onepage-4.html#features">Click here</a>
<a href="http://themehats.com/themes/jango/onepage-4.html#clients">Click here</a>
<a href="http://themehats.com/themes/jango/onepage-4.html#pricing">Click here</a>

​

Answer 1

正如你在评论中所说，你在你的页眉上有一个固定的位置，所以你需要在JS中计算你的页眉高度。

如果您有jQuery：

$('a').on('click' function(){
    var $link = $(location.href);
    var position = $link.offset().top - $('#header').height()
    $(window.animate({scrollTop: position},{duration: 500})
});

对于URL中带有锚点的onload：

$(window).load(function() {
    var $link = $(location.href);
    if($link.length {
        var position = $$link.offset().top - $('#header').height()
        $(window.animate({scrollTop: position},{duration: 500})
    }
});