Question

我已经看过几个Q＆amp; As就此而言，我似乎无法让任何一个在我的情况下工作，例如：jQuery Smooth Page Anchor Transitions with position:fixed menu
：（

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

向下滚动页面时，主菜单会粘贴/修复到顶部。固定菜单中还有一个下拉列表。在菜单内（可能还有页面上的其他位置）我有常规链接和锚链接。当前点击锚点链接时，菜单＆amp;下拉屏幕在固定位置时掩盖内容。

我需要跳转到锚点以调整菜单以及打开时的下拉菜单。当内容在滚动到锚点时向上和向下动画，以及在下拉列表打开和关闭时向上和向下动画，这将是理想的选择。

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

我尝试了以下操作，但代码中出现了错误，导致我的下拉菜单出现问题：

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

我想如果我可以让它工作然后我可以工作添加额外的tofest来考虑菜单，然后尝试抵消下拉菜单打开/关闭。但我无法让这个第一个想法工作......

Answer 1

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

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

}

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

现在当我点击进入其中一个锚点时，它在我固定的菜单顶部排成一行:) 可能有更好的方法，但这对我有用！〜

接下来查看我是否可以将其设置为动画以滚动到锚点而不是向右跳转到它。那会很好：）

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

1 个答案: