0

我已经看到了几个关于此的问答，但我似乎无法让其中任何一个在我的情况下工作，例如：jQuery Smooth Page Anchor Transitions with position:fixed menu
:(

页面示例： 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;
    });

我想如果我可以让它工作，那么我可以添加额外的offest来解释菜单，然后尝试在下拉菜单打开/关闭时进行抵消。但我无法让这个第一个想法发挥作用....

4

1 回答 1

0

通过使用一些 css 重新定位我的锚点，我能够在我的情况下解决这个问题。在我的情况下，锚点没有应用于任何视觉元素，所以我可以移动它们而不会伤害任何东西。我用了：

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

}

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

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

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

于 2013-04-25T20:32:48.160 回答