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

obtener id de un elemento javascript

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo puedo desplazarme a una ubicación específica en la página usando jquery? 9 respuestas

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
}

<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 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 <div id="div_element2"> . El manejo de opciones y la configurabilidad se deja como un ejercicio para el lector.

Answer 2

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.

Answer 3

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()(docs) top position()(docs) del elemento y configure scrollTop()(docs) en esa posición:

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

Answer 4

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.

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

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