En mi página HTML, quiero poder 'ir a' / 'desplazarse a' / 'centrarse 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, de hacer 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 } <div id="div_element1"> yadda yadda </div> <div id="div_element2"> blah blah </div> <span onclick="focusOnElement('element1');">Click here to go to element 1</span> <span onclick="focusOnElement('element2');">Click here to go to element 2</span>Si el elemento no está visible actualmente en la página, puede usar el método scrollIntoView() nativo.
$('#div_' + element_id)[0].scrollIntoView( true ); Donde true significa alinear en la parte superior de la página y false es alinear en la parte inferior.
De lo contrario, hay un complemento scrollTo() para jQuery que puede usar.
O tal vez solo obtenga la posición top position() (docs) del elemento y configure scrollTop() (docs) en esa posición:
var top = $('#div_' + element_id).position().top; $(window).scrollTop( top );La técnica estándar en forma de complemento se vería así:
(function($) { $.fn.goTo = function() { $('html, body').animate({ scrollTop: $(this).offset().top + 'px' }, 'fast'); return this; // for chaining... } })(jQuery); Entonces podría decir $('#div_element2').goTo(); para desplazarse hasta <div id="div_element2"> . El manejo de opciones y la configurabilidad se dejan como ejercicio para el lector.
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