jQuery OnLoad Page Scroll Issue

我正在開發一個網站，該網站涉及到用戶能夠使用地址欄中的#值從其他頁面導航到頁面的不同部分。jQuery OnLoad Page Scroll Issue

我已經寫了一個jQuery函數來處理這裏的滾動：

jQuery.fn.scrollToDiv = function(navheight) 
{ 
    if (!navheight) 
    { 
     navheight = 30; 
    } 

    var offset = this.offset(); 
    var offsetTop = offset.top; 
    var totalScroll = offsetTop-navheight-27; 
    $('body,html').animate({ 
      scrollTop: totalScroll 
    }, 500); 
}

而且我打電話2個不同場景的功能;當用戶單擊該對象位於當前頁面上的鏈接時，以及當用戶單擊滾動到元素之前單擊將鏈接帶到另一個頁面的鏈接時。請看下圖：

當你在頁面上：

$('.gotoPage').on('click', function(e) 
{ 
    e.preventDefault(); 
    var sPath = window.location.pathname; 
    var sPage = sPath.substring(sPath.lastIndexOf('/') + 1); 
    if (sPath != '' && sPath != 'home') 
    { 
     var href = $(this).attr('href'); 

     handleScroll(href); 
    } 
});

，當你是不是在頁面上：

$(document).ready(function(e) 
{  
    var target = window.location.hash; 

    if (target != '') 
    { 
     $(target).scrollToDiv(30); 
    } 
});

它完美，當你在頁面上，點擊鏈接，但是當你不在頁面上時，它會像你期望的那樣將你帶到後面的頁面，但它不會滾動到所需的元素。

讓我知道如果你需要更多的信息，提前

感謝

編輯：新增功能handleScroll(target)

function handleScroll(target) 
{ 
    if (target != '') 
    { 
     $(target).scrollToDiv(30); 
    } 
}

來源

2015-06-23 Zach Ross-Clyne

您是否在控制檯中發現任何錯誤？也許'目標'不是一個有效的選擇器？ –

沒有錯誤，我在刷新頁面時注意到它向下滾動然後跳回到頁面的頂部。 –

也許這是由於圖像和造型資源影響窗戶的高度。 '在代碼依賴於加載的資源的情況下（例如，如果需要圖像的尺寸），代碼應該放置在加載事件的處理程序中。「因此，將滾動腳本（塊號爲2的問題放在您的問題中）：'$（window）.load（function（）{...}）;' –

按照您的評論：

我當刷新頁面時，我們注意到了這一點它向下滾動，然後跳回頁面

的頂部看來你的腳本的工作，但後來事情影響了。我相信有一些資源作爲額外的CSS代碼或圖像，當滾動動畫生效時不會被考慮在內，因爲該函數的作用是top偏移量 - 您必須確保在所有正在加載可能影響文檔高度或元素偏移量的資源。

因此，請不要在.ready()中使用您的腳本，請使用。

.ready() vs. .load()

在大多數情況下，該腳本可以儘快的DOM層次結構已經完全構造運行。傳遞給.ready（）的處理程序保證在DOM準備就緒後執行，所以這通常是最好的位置來附加所有其他事件處理程序並運行其他jQuery代碼。

在代碼依賴於加載資源的情況下（例如，如果需要尺寸的圖片），代碼應該放置在加載事件的處理程序中。

來源

2015-06-24 09:06:19

jQuery OnLoad Page Scroll Issue

回答

相關問題