scrolltop в DIV не работает в JQuery

Question

Я хочу, чтобы оживить scrolltop с в DIV, когда я живой организм прокручивается работает нормально для меня

Но когда я использую его в div это не удается.

Это работает нормально для меня http://jsfiddle.net/yazaLyxs/

$('body').animate({ 
    scrollTop: $('#myId').offset().top 
}, 'slow'); 

Тогда почему этот код не работает?

$('.myClass').animate({ 
    scrollTop: $('#myId').offset().top 
}, 'slow'); 

http://jsfiddle.net/qVWuv/198/

Answer 1

ОК, так как никто не ответил точно о том, что все о:

.position().top не учитывает запас элемента.jsFiddle demo

---

Ваш первый пример может работать в Chrome, но не в Firefox, причиной незначительных различий в documentElement.

Чтобы объяснить это вам придется использовать:

$('html, body').animate({ 

Теперь давайте рассмотрим разницу между методами .position() и .offset():

.position()

Получить ток координаты первого элемента в наборе согласованных элементов относительно родителя смещения.

.offset()

Получить текущие координаты первого элемента, или установить координаты каждого элемента в наборе соответствующих элементов, по отношению к документу.

если выше ясно, и вы хотите, чтобы получить внутренний child элемент позиции внутри позиционируемый родителя ^*, вам нужно использовать .position().

#parent { 
    height: 300px; 
    background: teal; 
    margin: 500px 0 0 0; 
    overflow:scroll; 
    position:relative; /* NEEDED! */ 
} 

Теперь, вы могли бы установить маржу элемент внутренней к 500px но верхнее положение еще 0 точек!

console.log($('#child').position().top); // 0 

поэтому вам нужно установить top: стиль (вместо margin) и position: к #save элемента для того, чтобы использовать $('#child').position().top: http://jsfiddle.net/RokoCB/qVWuv/203/(или, по крайней мере, поставить некоторые другие элементы перед ним или каким-либо содержанием).

_{* Если вы не установили «позицию:» ​​CSS свойство родительского элемента вам необходимо вычесть верхнюю позицию родителя или смещение.}

Answer 2

, если в HTML

<div class="myClass"> 
    <label></label> 
    <label id="myId">target Label</label> 
</div> 

и в CSS

div{ 
    height: 100px; 
    width: 100px; 
    overflow: auto; 
} 

в JS

$('.myClass').animate({ 
    scrollTop: $('#myId').position().top 
}, 'slow'); 

все должно работать .. Jsfiddle

Answer 3

$('body').animate({ 
    scrollTop: $('#myId').position().top 
}, 'slow'); 

Это работает отлично becauase вы установили деления при маржинальной-топ: 500px; которые делают вертикальную прокрутку в изображение над телом.

Для этого вам нужен элемент DOM, имеющий достаточную высоту для получения вертикального прокрутки, обратите внимание, что этот элемент является родительским элементом, а не целевым элементом, т. Е. Тегом, который содержит ваш div.

Проверить это Jsfiddle Demo