滚动至锚点+调整顶部固定菜单

Question

我已经看到了几个有关此问题的问答，但我似乎无法在我的情况下让它们起作用，例如： 带有位置：固定菜单的jQuery平滑页面锚转换
:(

页面示例： http : //fpco-site.squarespace.com/familylife

当您向下滚动页面时，主菜单在顶部停留/修复。 固定菜单中还有一个下拉菜单。 在菜单中（可能还有页面上的其他位置），我有常规链接以及锚链接。 当前，当单击锚链接时，菜单和下拉菜单将内容固定在固定位置。

我需要跳转到锚点以适应菜单，还需要在打开时下拉菜单。 内容在滚动到锚点时可以上下动画，而下拉菜单的打开和关闭时则可以上下动画。

如果很重要，我的整个页面锚点都通过jquery添加。

我尝试了以下操作，但是代码中的某些错误打破了我的下拉菜单：

    /* scrollTo */
    function scrollTo(id){
        $('html,body').animate({scrollTop: $(id).offset().top},'slow');
    };
    $('a[href^="#"]').click(function(){
        scrollTo($(this).attr('href'));
        return false;
    });

我想如果我能使它正常工作，那么我可以接着添加其他项目以解决菜单问题，然后尝试在下拉菜单打开/关闭时进行抵消。 但是我无法让这个第一个想法起作用....

Answer 1

我可以通过使用一些CSS重新定位锚来解决此问题。 在我的情况下，锚点未应用于任何视觉元素，因此我可以移动它们而不会伤到任何东西。 我用了：

.anchor {
position: relative;
top: -160px;
height: 1px;
display: block;

}

我还告诉下拉菜单在单击下拉菜单中的锚链接时关闭。 这样，我不必担心下拉菜单是打开还是关闭。

现在，当我单击以转到其中一个锚点时，它会在顶部的固定菜单下对齐：)可能有更好的方法，但这对我有用！

接下来查看我是否可以使其动画以滚动到锚点，而不是直接跳到锚点。 那样就好了 ：）