¿Cómo ir a un elemento específico en la página?

En mi página HTML, quiero poder ‘ir a’ / ‘desplazarse a’ / ‘enfocarme’ en un elemento de la página.

Normalmente, usaría una etiqueta de anclaje con href="#something" , pero ya estoy usando el evento hashchange junto con el complemento BBQ para cargar esta página.

Entonces, ¿hay alguna otra forma, a través de JavaScript, para que la página vaya a un elemento dado en la página?

Aquí está el esquema básico de lo que estoy tratando de hacer:

 function focusOnElement(element_id) { $('#div_' + element_id).goTo(); // need to 'go to' this element } 
yadda yadda
blah blah
Click here to go to element 1 Click here to go to element 2

La técnica estándar en forma de complemento sería algo como esto:

 (function($) { $.fn.goTo = function() { $('html, body').animate({ scrollTop: $(this).offset().top + 'px' }, 'fast'); return this; // for chaining... } })(jQuery); 

Entonces podrías decir $('#div_element2').goTo(); para desplazarse a

. El manejo de opciones y la configurabilidad se deja como un ejercicio para el lector.

Si el elemento no está actualmente visible en la página, puede usar el scrollIntoView() nativo scrollIntoView() .

 $('#div_' + element_id)[0].scrollIntoView( true ); 

Donde true significa alinearse a la parte superior de la página, y false se alinea al final.

De lo contrario, hay un plugin scrollTo() para jQuery que puedes usar.

O tal vez solo obtenga la position() top position() (documentos) del elemento y configure scrollTop() (documentos) en esa posición:

 var top = $('#div_' + element_id).position().top; $(window).scrollTop( top ); 
 document.getElementById("elementID").scrollIntoView(); 

Lo mismo, pero envolviéndolo en una función:

 function scrollIntoView(eleID) { var e = document.getElementById(eleID); if (!!e && e.scrollIntoView) { e.scrollIntoView(); } } 

Esto incluso funciona en un IFrame en un iPhone.

Ejemplo de uso de getElementById: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_document_getelementbyid

aquí hay un javascript simple para eso

llama esto cuando necesites desplazar la pantalla a un elemento que tenga id = “yourSpecificElementId”

 window.scroll(0,findPos(document.getElementById("yourSpecificElementId"))); 

y necesitas esta función para el trabajo:

 //Finds y value of given object function findPos(obj) { var curtop = 0; if (obj.offsetParent) { do { curtop += obj.offsetTop; } while (obj = obj.offsetParent); return [curtop]; } } 

la pantalla se desplazará a su elemento específico.

Para desplazarse a un elemento específico en su página , puede agregar una función a su jQuery(document).ready(function($){...}) siguiente manera:

 $("#fromTHIS").click(function () { $("html, body").animate({ scrollTop: $("#toTHIS").offset().top }, 500); return true; }); 

Funciona como un encanto en todos los navegadores. Ajuste la velocidad de acuerdo a su necesidad.