滾動到帶有固定標題的錨點位置

Question

我創建了一個單頁垂直滾動。 當用戶點擊像“about”這樣的錨點時，它會滾動到那個位置。 需要記住的是，我使用了一個高度為 80px 的固定標題。

上面的例子有效。 當我用錨點“about”點擊“about us”時，它會滾動到id為“about”的部分。 沒什么特別的。

但問題如下。 當我說，我想將訪問者導航到單頁設計中的一個特殊位置。 例如像這樣：www.mydomain.com/#about - 當輸入上面的 URL 時，它應該直接滾動到那個位置。 但這我不能得到工作。 我不知道如何解釋這一點，因為有很多場景發生在我身上。 就像它會直接滾動到底部頁面，或者它不會滾動到特定於該部分，它會停止到很晚，或者位置不減去導致固定標題與該部分內容重疊的標題。 重要的是target位置減去固定標題。

除此之外，我認為我在某些部分使用了不必要的代碼。 一些關於如何改進我的代碼的建議也很好。

您可以在此處找到工作代碼

代碼：我的代碼的第一部分。 這里我控制點擊功能。 當用戶點擊#primary-navwrapper內的鏈接時，它應該執行該功能。 將詢問的哈希鏈接存儲在anchorId並將其設置為 scrollToAnchor 函數。 然后它通過固定標頭減少該哈希的位置（因此標頭不會與內容重疊）。 並使用當前的 anchorId 更新哈希。

// An offset to push the content down from the top
    var offset = $('#header').outerHeight();


    // Navigation click action
    // Scroll to # HASH ID
    $('#primary-navwrapper li a[href^="#"]').click(function(event) {

        // Prevent from default action to intitiate
        event.preventDefault();

        // The id of the section we want to go to
        var anchorId = $(this).attr('href');

        scrollToAnchor(anchorId);

        return false;
    });


    function scrollToAnchor(anchorId) {

    // Our scroll target : the top position of the section that has the id referenced by our href
    var target = $(anchorId).offset().top - offset;
    //console.log("target" + target);

    // The magic...smooth scrollin' goodness.
    $('html, body').animate({ scrollTop: target }, 500, function () {
        //window.location.hash = '!' + id;
        window.location.hash = anchorId;
    });

}

有人對此有解決方案或一些建議。 注意你的答案。

卡斯帕

Answer 1

更新的答案

這是工作代碼jsFiddle

---

問題總結

1. 當用戶單擊其中一個菜單時，屏幕將移動到內容部分，但它離標題太近了。 內容區域和我的標題之間應該有空格。
2. 當用戶使用“#aboutus”等查詢字符串進入我的主頁時，我需要將屏幕移動到預期的內容部分

這是你目前我能理解的核心問題，我為你未來的幫助者總結了這一點。

我徹底檢查了您的代碼，發現了一些無法為您帶來預期結果的因素。

首先，沒有document.ready()作用域。 一切都在全局范圍內聲明。 好吧，您的函數在全局部分似乎沒問題，但是您的單擊事件應該在document.ready()部分中聲明，以便jQuery正確獲取它們並初始化它們。

出於這個原因，您的原始代碼在向下滾動到預期部分時不會產生動畫，因為它是瀏覽器的默認行為href=# ，而不是您的點擊事件。 所以我添加了一些代碼來確保事件調用。

其次，當您的 url 具有查詢字符串（如#gallery, #aboutus, and etc時，您沒有任何方法可以滾動到預期的內容部分。 所以我為此放了一些代碼

請在腳本表上找到我的 ID，然后它會找到我新添加或編輯現有代碼的確切點。 我評論了很多

---

供參考

有一件事我想不通。 您的代碼應該可以很好地工作，但 IE 的滾動方式不同。 由於您在單擊事件上使用event.preventDefault() ，因此href=#something的默認滾動操作href=#something應該起作用。 但它在 IE 中執行行為，而 chrome 顯示預期結果。 （我在這里告訴您的是為粘性標題留出空間的任務）

起初我以為這是 IE 的錯誤，但事實並非如此。 它應該像我制作的這個例子一樣工作。 好吧，我不能再深入研究這個問題了。 是你的時候了。

---

舊答案

在這種情況下，您需要獲取查詢字符串並讓您的scrollToAnchor在$(document).ready()點獲取它。

var queryString = window.location.hash;    
scrollToAnchor(queryString);

我在你的小提琴上測試過，它有效。

並且請確保您的scrollToAnchor不會因為參數為空而引發錯誤。 空字符串""和null對象會導致scrollToAnchor出現錯誤

放置這樣的保護措施。

function scrollToAnchor(anchorId) {
    if ( anchorId == null || anchorId == "" ) {
        return false;
    }
    .
    .

但是，當用戶輸入錯誤的查詢字符串（如#avoutus中不存在的#avoutus ，此保護措施也無法防止錯誤。 所以我建議你避免$(anchorId).offset().top - offset; 這種代碼。

直接通過這樣的動態變量選擇一個元素不能保證一個安全的對象，除非它們完全在你的控制之下。

Answer 2

這對我有用。

html {
  scroll-padding-top: 70px; /* height of sticky header */
}