Tengo un enlace en una página HTML larga. Cuando hago clic en él, deseo que una diven otra parte de la página sea visible en la ventana desplazándome hacia la vista.
Un poco como EnsureVisibleen otros idiomas.
He comprobado scrollTopy scrollToparecen pistas falsas.
¿Alguien puede ayudar?
Respuestas:
vieja pregunta, pero si alguien encuentra esto a través de google (como hice yo) 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 quirksmode, ¡esto es compatible con todos los navegadores principales !
document.getElementById('#something').scrollIntoView({ behavior: 'smooth', block: 'center' });
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;
}
});¿Qué hay de JQuery ScrollTo? Vea este código de muestra
<a href="#myAnchorALongWayDownThePage">Click here to scroll</a>
<A name='myAnchorALongWayDownThePage"></a>No hay desplazamiento elegante, pero debería llevarte allí.
La dificultad con el desplazamiento es que es posible que no solo necesite desplazarse por la página para mostrar un div, sino que también puede necesitar desplazarse dentro de los 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 (ventana gráfica) es menor que scrollHeight (la altura del contenido).
También puede usar la propiedad offsetTop para averiguar en qué parte del contenedor se encuentra un elemento.
Para construir una rutina de "desplazamiento a la vista" de propósito general desde cero, necesitaría comenzar en el nodo que desea exponer, asegurarse de que esté en la parte visible de su padre, luego repetir lo mismo para el padre, etc., todo el camino hasta llegar a la cima.
Un paso de esto se vería así (código no probado, sin verificar 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);
}
}Puede utilizar el Element.scrollIntoView()método mencionado anteriormente. Si lo deja sin parámetros dentro, tendrá un desplazamiento feo instantáneo . Para evitarlo, puede agregar este parámetro - behavior:"smooth".
Ejemplo:
document.getElementById('scroll-here-plz').scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});Simplemente reemplácelo scroll-here-plzcon su divelemento o en un sitio web. Y si ves tu elemento en la parte inferior de tu ventana o la posición no es la que esperabas, juega con el parámetro block: "". Puede usar block: "start", block: "end"o block: "center".
Recuerde: utilice siempre 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.
La propiedad que necesita es location.hash. Por ejemplo:
location.hash = 'top'; // saltaría al ancla con nombre "top
No sé cómo hacer la bonita animación de desplazamiento sin el uso de dojo o algún juego 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)
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'});"scrollTop (IIRC) es el lugar del documento al que se desplaza la parte superior de la página. scrollTo desplaza la página de modo que la parte superior de la página sea donde usted especifique.
Lo que necesita aquí son algunos estilos manipulados de Javascript. Digamos que si quisiera el div fuera de la pantalla y se desplaza hacia adentro desde la derecha, establecería el atributo izquierdo del div al ancho de la página y luego lo disminuiría 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ías que un div separado 'saliera' de algún lugar (algo así como lo hace este sitio a veces), y no mover toda la página a una sección. El uso adecuado de anclajes lograría ese efecto.
Hay 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?), Le sugiero que lo haga manualmente. Esto implica dos pasos:
quirksmode da una buena explicación del mecanismo detrás del primero. Esta es mi solución preferida:
function absoluteOffset(elem) {
return elem.offsetParent && elem.offsetTop + absoluteOffset(elem.offsetParent);
}Utiliza la conversión 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!
Personalmente, encontré que la respuesta anterior basada en jQuery de Josh es 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 jQ solo por eso un proposito.
¡Salud!
EDITAR: OK ... tan solo unos segundos después de publicar esto, vi otra respuesta justo debajo de la mía (no estoy seguro si todavía está 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á! Entonces, si quieres la animación elegante, usa jQuery. Rápido y sucio ... ¡usa este!
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;
}
}
});Corrígeme si me equivoco, pero leo la pregunta una y otra vez y sigo pensando que Angus McCoteup estaba preguntando cómo configurar un elemento para que esté en posición: fijo.
Angus McCoteup, consulte http://www.cssplay.co.uk/layouts/fixed.html : si desea que su DIV se comporte como un menú allí, eche un vistazo a un CSS allí