it-swarm-es.tech

JavaScript para desplazarse por la página larga a DIV

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

Un poco como EnsureVisible en otros idiomas.

He comprobado scrollTop y scrollTo pero parecen ser pistas falsas.

¿Alguien puede ayudar?

94
Angus McCoteup

vieja pregunta, pero si alguien encuentra esto a través de google (como lo hice) y quién no quiere usar anclas o jquery; hay una función javascript incorporada para "saltar" a un elemento;

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

y lo que es aún mejor; De acuerdo con las excelentes tablas de compatibilidad en modo quirks, esto es soportado por todos los principales navegadores !

365
futtta

Si no desea 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;
        }
    });
23
Josh
22
George Mauer
<a href="#myAnchorALongWayDownThePage">Click here to scroll</a>

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

No es lujoso desplazarse pero debería llevarte allí.

15
mjallday

La dificultad con el desplazamiento es que es posible que no solo tenga que desplazarse por la página para mostrar un div, sino que también deba desplazarse dentro de divs desplazables en cualquier número de niveles.

La propiedad scrollTop está disponible en cualquier elemento DOM, incluido el cuerpo del documento. Al configurarlo, puede controlar qué tan abajo se desplaza algo. También puede usar las propiedades clientHeight y scrollHeight para ver cuánto desplazamiento se necesita (el desplazamiento es posible cuando clientHeight (viewport) es menor que scrollHeight (la altura del contenido).

También puede usar la propiedad offsetTop para averiguar dónde se encuentra un elemento en el contenedor.

Para crear una rutina de "desplazamiento a la vista" de propósito verdaderamente general desde el principio, deberá comenzar en el nodo que desea exponer, asegúrese de que esté en la parte visible de su padre, luego repita lo mismo para el padre, etc. El camino hasta llegar a la cima.

Un paso de esto sería algo así (código no probado, sin verificar los casos de Edge):

function scrollIntoView(node) {
  var parent = node.parent;
  var parentCHeight = parent.clientHeight;
  var parentSHeight = parent.scrollHeight;
  if (parentSHeight > parentCHeight) {
    var nodeHeight = node.clientHeight;
    var nodeOffset = node.offsetTop;
    var scrollOffset = nodeOffset + (nodeHeight / 2) - (parentCHeight / 2);
    parent.scrollTop = scrollOffset;
  }
  if (parent.parent) {
    scrollIntoView(parent);
  }
}
8
levik

Esto funciono para mi

document.getElementById('divElem').scrollIntoView();
6
Xcoder

Respuesta publicada aquí - la misma solución para su problema.

Edit: la respuesta de JQuery es muy agradable si quieres un desplazamiento suave, no lo había visto en acción antes.

5
Chuck

¿Por qué no un ancla con nombre?

4
Bloodhound

La propiedad que necesita es location.hash. Por ejemplo:

location.hash = 'top'; // saltaría al ancla con nombre "arriba

No sé cómo hacer la animación de Niza scroll sin el uso de dojo o algún kit de herramientas como ese, pero si solo lo necesitas para saltar a un ancla, location.hash debería hacerlo.

(probado en FF3 y Safari 3.1.2)

4
Scott Swezey

No puedo agregar un comentario a la respuesta de futtta anterior, pero para un uso de desplazamiento más suave:

onClick="document.getElementById('more').scrollIntoView({block: 'start', behavior: 'smooth'});"
3
funnyfish

Puede utilizar el método Element.scrollIntoView() como se mencionó anteriormente. Si lo deja sin parámetros, tendrá undesplazamiento feo instantáneo. Para evitar que pueda agregar este parámetro - behavior:"smooth".

Ejemplo:

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

Simplemente reemplace scroll-here-plz con su div o elemento en un sitio web. Y si ve su elemento en la parte inferior de su ventana o la posición no es la que esperaba, juegue con el parámetro block: "". Puede utilizar block: "start", block: "end" o block: "center".

Recuerde: siempre use parámetros dentro de un objeto {}.

Si aún tiene problemas, vaya a https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Hay documentación detallada de este método.

3
Smelino

Para un desplazamiento suave, este código es útil.

$('a[href*=#scrollToDivId]').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      var head_height = $('.header').outerHeight(); // if page has any sticky header get the header height else use 0 here
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - head_height
        }, 1000);
        return false;
      }
    }
  });
0
Swarnendu Paul

Personalmente, encontré que la respuesta anterior basada en jQuery de Josh es la mejor que he visto, y funcionó perfectamente para mi aplicación ... por supuesto, ya estaba ya uso jQuery ... ciertamente no hubiera incluido todo el jQ biblioteca sólo para ese propósito.

¡Aclamaciones!

EDICIÓN: OK ... así que, apenas unos segundos después de publicar esto, vi otra respuesta justo debajo mía (no estoy seguro si todavía estaba debajo de mí después de una edición) que decía usar:

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

¡Esto funciona perfectamente y en mucho menos código que la versión jQuery! No tenía idea de que había una función incorporada en JS llamada .scrollIntoView (), ¡pero ahí está! Así que, si quieres la animación elegante, ve a jQuery. Rápido y sucio ... ¡usa este!

0
Lelando

Existe un complemento jQuery para el caso general de desplazamiento a un elemento DOM, pero si el rendimiento es un problema (¿y cuándo no lo es?), Sugeriría hacerlo manualmente. Esto implica dos pasos:

  1. Encontrar la posición del elemento al que se está desplazando.
  2. Desplazándose hasta esa posición.

quirksmode da una buena explicación del mecanismo detrás del primero. Aquí está mi solución preferida:

function absoluteOffset(elem) {
    return elem.offsetParent && elem.offsetTop + absoluteOffset(elem.offsetParent);
}

Utiliza la conversión desde nula a 0, lo que no es la etiqueta adecuada en algunos círculos, pero me gusta :) La segunda parte usa window.scroll. Así que el resto de la solución es:

function scrollToElement(elem) {
    window.scroll(absoluteOffset(elem));
}

Voila!

0
Andrey Fedorov

scrollTop (IIRC) es donde en el documento se desplaza la parte superior de la página. scrollTo desplaza la página para que la parte superior de la página sea donde usted especifique.

Lo que necesitas aquí es algunos estilos de JavaScript manipulados. Diga que si desea que el div esté fuera de la pantalla y desplácese desde la derecha, establecerá el atributo izquierdo del div en el ancho de la página y luego lo disminuirá en una cantidad establecida cada pocos segundos hasta que esté donde desee.

Esto debería apuntarle en la dirección correcta.

Adicional: Lo siento, pensé que quería un div separado para "saltar" de algún lugar (algo así como a veces lo hace este sitio), y no mover la página completa a una sección. El uso adecuado de los anclajes lograría ese efecto.

0
Benjamin Autin