content - JavaScript para desplazarse por la página larga a DIV

title css

Question

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 al desplazarse a la vista.

Un poco como EnsureVisible en otros idiomas.

He revisado scrollTop y scrollTo pero parecen arenques rojos.

¿Alguien puede ayudar?

Answer 1

¿Por qué no un ancla con nombre?

Answer 2

¿Qué hay de JQuery ScrollTo - ver este código de ejemplo

Answer 3

Corrígeme si me equivoco, pero estoy leyendo la pregunta una y otra vez y sigo pensando que Angus McCoteup estaba preguntando cómo establecer un elemento para que sea la posición: fija.

Angus McCoteup, echa un vistazo a http://www.cssplay.co.uk/layouts/fixed.html - si quieres que tu DIV se comporte como un menú, echa un vistazo a un CSS allí

Answer 4

Esto funcionó para mí

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

Answer 5

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?), Sugeriría hacerlo manualmente. Esto implica dos pasos:

1. Encontrar la posición del elemento al que está desplazándose.
2. Desplazarse a esa posición.

quirksmode da una buena explicación del mecanismo detrás de la primera. Esta es mi solución preferida:

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

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

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

Voila!

Answer 6

La dificultad con el desplazamiento es que no solo tendrá que desplazarse por la página para mostrar un div, sino que también deberá desplazarse dentro de los divs desplazables en cualquier cantidad de niveles.

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

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

Para construir desde el principio una rutina de "desplazarse a la vista" de propósito general, debe comenzar por el nodo que desea exponer, asegurarse de que esté en la parte visible de su elemento primario, repetir lo mismo para el elemento primario, etc., todo el camino hasta llegar a la cima.

Un paso de esto sería algo como esto (código no probado, no verificando casos extremos):

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);
}
}

Answer 7

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

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

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

(probado en FF3 y Safari 3.1.2)

Answer 8

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

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

Answer 9

Para 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;
}
}
});

Answer 10

Personalmente, me pareció que la respuesta de Josh basada en jQuery anterior era la mejor que vi, y funcionó perfectamente para mi aplicación ... por supuesto, ya estaba usando jQuery ... ciertamente no habría incluido toda la biblioteca de jQ solo para eso un proposito.

¡Aclamaciones!

EDITAR: OK ... tan solo unos segundos después de publicar esto, vi otra respuesta justo debajo de la mía (no estoy seguro de si todavía está debajo de mí después de una edición) que dijo usar:

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

¡Esto funciona perfectamente y con 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á! Entonces, si quieres la animación de lujo, ve jQuery. Rápido y sucio ... ¡usa este!

Answer 11

Puede usar el método Element.scrollIntoView() como se mencionó anteriormente. Si lo dejas sin parámetros adentro, tendrás un desplazamiento desagradable instantáneo . Para evitar eso, puede 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 la ventana o la posición no es la que esperaba, juegue con el block: "" parámetros block: "" . Puedes usar 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 para este método.

Answer 12

Respuesta publicada here : la misma solución a su problema.

Editar: la respuesta de JQuery es muy buena si quieres un desplazamiento suave: no había visto eso en acción antes.

Answer 13

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;
}
});

Answer 14

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

Lo que necesitas aquí es algunos estilos manipulados por Javascript. Digamos que si quisieras que div fuera de la pantalla y te muevas hacia adentro desde la derecha, establecerías el atributo izquierdo del div al ancho de la página y luego lo disminuirías en una cantidad determinada cada pocos segundos hasta que esté donde lo deseas.

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

Adicional: Lo siento, pensé que querías un div separado para ''salirse'' de algún lado (algo así como este sitio a veces), y no mover toda la página a una sección. El uso adecuado de anclas lograría ese efecto.

Answer 15

vieja pregunta, pero si alguien encuentra esto a través de google (como yo lo hice) y quién no quiere usar anchors 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 grandes tablas de compatibilidad en quirksmode, ¡esto es compatible con todos los principales navegadores !

Answer 16

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

Sin desplazamientos extravagantes, pero debería llevarte allí.