jQuery .scrollTop（）沒有滾動到李元素如預期

我基本上有一個無序的列表項的列表中的項目，不能正確滾動到下一個元素。我只是想讓一個按鈕在列表中上下滾動。jQuery .scrollTop（）沒有滾動到李元素如預期

雖然代碼執行滾動，它不與li元件匹配。每次點擊後，它會向上滾動一點，然後下一次點擊。我試着走DOM並驗證它滾動的元素是li元素，但沒有看到問題。

我有以下的jsfiddle： http://jsfiddle.net/YD9s5/9/

的要素是：

與photos-div
無序列表與photos-li ID的ID的捲動的div（哎呦，現在就離開）
列表項與遞增ID爲photo-li-X其中X是一個棕土

的代碼被用於滾動DIV是：

 $('#photos-div').scrollTop($('#photo-li-' + i).offset().top);

i的變量被遞增，你可以看到。

來源

2013-06-12 taco

http：// stackoverflow。com/questions/34068396/jquery-scroll-li-id-to-top-of-div –

問題是.offset()相對於整個文檔獲取元素的位置，並且該位置不斷向上移動。所以，一旦你滾動到第1項，它返回.offset().top該項目1 目前有文件，這是現在所在的項目0 使用是英寸

將console.log($('#photo-li-0').offset());添加到您的scrollToElement()函數的頂部，您會明白我的意思。請注意，頂部偏移持續下降，並在離開文檔頂部時快速移動到負數。

修復方法是採取的$('#photo-li-'+i)和$('#photo-li-0')偏移之間的差（或容器$('#photos-li')本身），並滾動到代替：

var newpos = $('#photo-li-' + i).offset().top - $('#photo-li-0').offset().top; $('#photos-div').scrollTop(newpos);

http://jsfiddle.net/mblase75/x4hQP/（結合其它改進）

來源

2013-06-12 15:51:19 Blazemonger

謝謝，這看起來像我期望的那樣工作。我打算再檢查一下這一點。 – taco

我接受了這個答案。它效果很好。 – taco

似乎該.offset()只從文檔的頂部進行測量。你感興趣的是從#photos-div的頂部到元素的距離。 Here是我在手動跟蹤div位置的工作版本。在控制檯中注意，當我記錄.offset()的值時，它與文檔相關，而不是滾動div。

似乎應該有辦法做到這一點無需攜帶狀態該分區的位置。工作就可以了...

這裏是我的more programatic solution。

來源

2013-06-12 15:58:03 Hank

您是否注意到它不會滾動li的頂部？這有點不合適;每點擊一次。 – taco

爲真，請參閱上文 – Hank

jQuery .scrollTop（）沒有滾動到李元素如預期

回答

相關問題