我有一個問題在我的頁面上實現相對複雜的自動滾動功能。這將顯示在我的代碼的問題...jquery動畫/ scrollTop到多個錨內divs

我有我的網頁上多個div（藍，紅，綠在我的例子），我不僅希望能夠滾動到（其中我的示例中的前3個按鈕可以完美實現），但我希望能夠滾動WITHIN（底部的3個按鈕代表我的最佳嘗試）。

我無法弄清楚的是，爲什麼滾動功能在我的第一個div（「scrollTo3rdBlueItem」按鈕）上工作得很好，但對其他div（「scrollTo3rdRedItem」和「scrollTo3rdGreenItem」按鈕）。在我的完整的Web應用程序中（顯然有更多的數據可以滾動瀏覽），我基本上看到父div所在的頁面越低，我能夠在其中滾動得越不準確。

雖然我無法簡單地嘗試調整偏移值，但我仍在努力識別大部分模式。任何想法我可能會做錯在這裏將非常感謝！

...因爲我沒有被允許發表這個沒有引用代碼 - 這裏是jQuery的功能，你可以看到我的codepen！

function scrollToParent(parentID){ 
     $('html,body').animate({scrollTop: $('#'+parentID).offset().top}, 500); 
} 
function scrollToChild(parentID, childID){ 
     //first focus on the parent 
    scrollToParent(parentID); 

     $('#'+parentID).animate(
     {scrollTop: $('#'+ childID).offset().top - 100} 
     , 500); 
}

來源

2016-02-05 d3wannabe

UPDATE

這裏的答案是錯COMPLETETLY。留在這裏保存評論。

UPDATE 2

明白了！你需要考慮到父div的偏移量。將您的scrollToChild函數更新到下面;

$('#'+parentID).animate(
    { 
     scrollTop: $('#'+ childID).offset().top - $('#'+parentID).offset().top 
    }, 500);

來源

2016-02-05 15:28:54 Lewis

元素ID是唯一的不是他們嗎？我正在嘗試在blueDiv中滾動到heading3，在redDiv中滾動heading8，在greenDiv中滾動heading13？對不起，如果我誤解你的觀點！ – d3wannabe

是的，這不是它......在這個例子中所有的元素都是獨一無二的。我得到相同的不一致的結果。有趣的是，當我向下滾動，然後返回，然後按下藍色分區中的標題3的按鈕時，這個按鈕也會超出目標！ –

詳細說明：它看起來像標題3，標題8和標題13正在滾動到視口的頂部（即瀏覽器試圖將它們滾動到絕對位置頂部：0，而不是可見div的頂部他們在！ –

jquery動畫/ scrollTop到多個錨內divs

回答

UPDATE

UPDATE 2

相關問題