javascript - first - jquery parent

¿Cómo desplazarse a un elemento en jQuery?

Question

He hecho el siguiente código en JavaScript para enfocar el elemento en particular (branch1 es un elemento),

document.location.href="#branch1";

Pero como también estoy usando jQuery en mi aplicación web, entonces quiero hacer el código anterior en jQuery. Lo he intentado pero no sé por qué no funciona,

$("#branch1").focus();

El código jquery (focus ()) anterior no funciona para div, mientras que si estoy intentando el mismo código con textbox, entonces está funcionando,

Por favor dime, ¿cómo puedo enfocarme en un elemento div usando jQuery?

¡Gracias!

Answer 1

Compruebe jQuery.ScrollTo , creo que ese es el comportamiento que desea, consulte la demo .

Answer 2

Creo que podrías estar buscando un "ancla" dado el ejemplo que tienes.

<a href="#jump">This link will jump to the anchor named jump</a>
<a name="jump">This is where the link will jump to</a>

El método jQuery de enfoque hace algo diferente de lo que estás tratando de lograr.

Answer 3

Me gusta @ user293153 Acabo de descubrir esta pregunta y no parece haber sido respondida correctamente.

Su respuesta fue mejor. Pero también puedes animar al elemento.

$(''html, body'').animate({ scrollTop: $("#some_element").offset().top }, 500);

Answer 4

Para mi problema este código funcionó, tuve que navegar a una etiqueta de anclaje en la carga de la página:

$(window).scrollTop($(''a#captchaAnchor'').position().top);

Para el caso, puede usar esto en cualquier elemento, no solo en una etiqueta de anclaje.

Answer 5

Para que la función focus () funcione en el elemento, div debe tener un atributo tabindex. Probablemente, esto no se haga de manera predeterminada en este tipo de elemento, ya que no es un campo de entrada. Puede agregar un tabindex por ejemplo en -1 para evitar que los usuarios que usan la pestaña se concentren en él. Si usa un tabindex positivo, los usuarios podrán usar la pestaña para enfocarse en el elemento div.

Aquí un ejemplo: http://jsfiddle.net/klodder/gFPQL/

Sin embargo, tabindex no es compatible con Safari.

Answer 6

Puede extender las funcionalidades de jQuery de esta manera:

jQuery.fn.extend({
scrollToMe: function () {
    var x = jQuery(this).offset().top - 100;
    jQuery(''html,body'').animate({scrollTop: x}, 500);
}});

y entonces:

$(''...'').scrollToMe();

fácil ;-)

Answer 7

Utilizar

$ (ventana) .scrollTop ()

Desplazará la ventana hacia el elemento.

 var scrollPos =  $("#branch1").offset().top;
 $(window).scrollTop(scrollPos);

Answer 8

Echa un vistazo a jquery-scrollintoview .

ScrollTo está bien, pero a menudo solo quieres asegurarte de que un elemento de la interfaz de usuario esté visible, no necesariamente en la parte superior. ScrollTo no te ayuda con esto. De README de scrollintoview:

¿Cómo soluciona este complemento el problema de la experiencia del usuario?

Este complemento desplaza un elemento particular a la vista similar a la funcionalidad incorporada del navegador (función scrollIntoView () de DOM), pero funciona de manera diferente (y puede decirse que es más fácil de usar):

• solo se desplaza al elemento cuando el elemento está realmente fuera de la vista; si el elemento está a la vista (en cualquier parte del área del documento visible), no se realizará desplazamiento;
• se desplaza usando efectos de animación; cuando se realiza el desplazamiento, los usuarios saben exactamente que no se les redirige a ninguna parte, pero en realidad ven que simplemente se mueven a otra parte dentro de la misma página (y en qué dirección se movieron);
• siempre se aplica la menor cantidad de desplazamiento; cuando el elemento está sobre el área del documento visible, se desplazará a la parte superior del área visible; cuando el elemento está debajo de lo visible, se desplazará hacia la parte inferior del área visible; esta es la forma más consistente de desplazamiento: cuando el desplazamiento siempre debe estar al principio, a veces no se puede desplazar un elemento hacia arriba cuando está cerca de la parte inferior del contenedor desplazable (por lo tanto, el desplazamiento sería impredecible);
• cuando el tamaño del elemento excede el tamaño del área del documento visible, su esquina superior izquierda es la que se desplazará;