html - JavaScript para desplazarse a un DIV en una página larga

Tengo un enlace en una página HTML larga. Cuando hago clic en él, deseo que un div en otra parte de la página sea visible en la ventana desplazándose hasta quedar a la vista.

Un poco como EnsureVisible en otros idiomas.

He revisado scrollTop y scrollTo, pero parecen pistas falsas.

¿Alguien puede ayudar?

Respuesta #1

Pregunta antigua, pero si alguien encuentra esto a través de Google (como lo hice yo) y no quiere usar anclas o jQuery; hay una función de JavaScript incorporada para 'saltar' a un elemento;

document.getElementById('youridhere').scrollIntoView();

¡Y lo que es aún mejor; según las grandes tablas de compatibilidad en quirksmode, esto es compatible con todos los navegadores principales!

Respuesta #2

Si no quieres agregar una extensión adicional, el siguiente código debería funcionar con jQuery.

$('a[href=#target]').
    click(function(){
        var target = $('a[name=target]');
        if (target.length)
        {
            var top = target.offset().top;
            $('html,body').animate({scrollTop: top}, 1000);
            return false;
        }
    });

Respuesta #3

¿Qué tal el JQuery ScrollTo? Mira este ejemplo de código

Respuesta #4

Puedes usar el método Element.scrollIntoView() como se mencionó arriba. Si lo dejas sin parámetros dentro tendrás un desplazamiento instantáneo y feo. Para evitar eso puedes agregar este parámetro: behavior:"smooth".

Ejemplo :

document.getElementById('scroll-here-plz').scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});

Solo reemplaza scroll-here-plz con tu div o elemento en un sitio web. Y si ves tu elemento en la parte inferior de tu ventana o la posición no es la que habrías esperado, juega con el parámetro block: "". Puedes usar block: "start", block: "end" o block: "center".

Recuerda: Siempre usa los parámetros dentro de un objeto {}.

Si todavía tienes problemas, visita https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Hay documentación detallada para este método.

Respuesta #5

<a href="#myAnchorALongWayDownThePage">Click here to scroll</a>

<A name='myAnchorALongWayDownThePage"></a>