滾動至錨點+調整頂部固定菜單

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;

}

我還告訴下拉菜單在單擊下拉菜單中的錨鏈接時關閉。 這樣，我不必擔心下拉菜單是打開還是關閉。

現在，當我單擊以轉到其中一個錨點時，它會在頂部的固定菜單下對齊：)可能有更好的方法，但這對我有用！

接下來查看我是否可以使其動畫以滾動到錨點，而不是直接跳到錨點。 那樣就好了 ：）