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

Question

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 un href="#something", pero ya estoy usando el evento hashchange junto con el BBQ plugin para cargar esta página.

¿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 
} 

<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> 

Answer 1

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

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

Entonces usted podría simplemente decir $('#div_element2').goTo(); para desplazarse a <div id="div_element2">. El manejo de opciones y la configurabilidad se deja como un ejercicio para el lector.

Answer 2

Si el elemento actualmente no está visible en la página, puede utilizar el método nativo scrollIntoView().

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

Dónde true medios se alinean con la parte superior de la página, y false es alinear a abajo.

De lo contrario, hay a scrollTo() plugin para jQuery que puede usar.

O tal vez sólo conseguir la topposition()^(docs) del elemento, y establecer el scrollTop()^(docs) a esa posición:

var top = $('#div_' + element_id).position().top; 
$(window).scrollTop(top); 

Answer 3

aquí es un javascript simple para que

llaman a esto cuando tenga que desplazarse por la pantalla a un elemento que tiene id = "yourSpecificElementId"

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

y necesita 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.

Answer 4

Para desplazarse a un elemento específico en su página , puede agregar una función en su jQuery(document).ready(function($){...}) de la 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.

Answer 5

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 funciona incluso en un iframe en un iPhone.

ejemplo del uso de getElemenById: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_document_getelementbyid