jQuery offset (). top devuelve el valor incorrecto – error con margen

si intenta obtener una compensación superior de un elemento de lista dentro de un elemento primario, y ese elemento primario no se coloca en la parte superior, obtendrá un valor incorrecto.

http://jsbin.com/yuxacuduna/1/edit?html,css,js,console,output

Intenta quitar el margin-top en el elemento .container y verás que funcionará.

¿Cuál es la solución para este problema?

Tu pregunta:

¿Cuál es la solución para este problema?

Te sugiero que .container el .container en relative :

 .container{ margin-top:100px; background:yellow; height:600px; width:300px; overflow-y:auto; overflow-x:hidden; position:relative; /*<---add this*/ } 

y dentro de tu script usa .position().top , te hará la vida más fácil:

 $('.container li:nth-child(7)').css("background", "red"); $('.container').animate({ scrollTop: $('.container li:nth-child(7)').position().top }); 

.offset().top :
Descripción : Obtenga las coordenadas actuales del primer elemento en el conjunto de elementos coincidentes, relativo al documento.

.position().top :
De los documentos:

Descripción: Obtenga las coordenadas actuales del primer elemento en el conjunto de elementos coincidentes, relativo al origen del desplazamiento.

.position().top se calcula desde la parte superior hasta el padre si el padre está relativamente posicionado.

 $(function() { $('.container li:nth-child(7)').css("background", "red"); $('.container').animate({ scrollTop: $('.container li:nth-child(7)').position().top }); }); 
 html, body { margin: 0; padding: 0; } .container { margin-top: 100px; background: yellow; height: 600px; width: 300px; overflow-y: auto; overflow-x: hidden; position: relative; } .container ul { margin: 0; padding: 0; list-style: none outside none; } .container li { background: blue; display: block; height: 150px; width: 100%; padding: 10px; margin-bottom: 5px; } 
  
  • asdasd
  • asdasd
  • asdasd
  • asdasd
  • asdasd
  • asdasd
  • asdasd77
  • asdasd
  • asdasd
  • asdasd
  • asdasd

También puede encontrar este problema si parte de su contenido son imágenes. Si llama a .offset () dentro de document.ready (), las imágenes pueden no haberse cargado aún. Intente mover su llamada .offset () a window.load ().

Creo que está funcionando correctamente. De acuerdo con la documentación jQuery offset() :

El método .offset () nos permite recuperar la posición actual de un elemento relativo al documento

Entonces, el problema que tiene es que está tratando de desplazarse por la ul pero con el valor de scrollTop del elemento dentro del documento , y no dentro de la lista. Para solucionarlo, simplemente corrija el valor teniendo en cuenta el scrollTop del padre (el ul ):

 $(function(){ $('.container li:nth-child(7)').css("background", "red"); $('.container').animate({ scrollTop: $('.container li:nth-child(7)').offset().top - $(".container").offset().top }); }); 

Puedes verlo trabajando en esta edición de tu JSBin: http://jsbin.com/fanixodiwi/1/edit?html,css,js,console,output

Yo tuve el mismo problema. Todas las soluciones en la web no funcionan para mí.

Si usa margen para separar ciertos elementos sin bordes, use relleno. El desplazamiento de jQuery () contará para los rellenos pero excluye los márgenes. Los números de posición en offset () volverán a ser correctos.