¿Cómo obtengo un elemento para desplazarme a la vista, usando jQuery?

118

Tengo un documento HTML con imágenes en formato de cuadrícula usando <ul><li><img.... La ventana del navegador tiene desplazamiento horizontal vertical &.¿Cómo obtengo un elemento para desplazarme a la vista, usando jQuery?

Pregunta: Cuando hago clic en una imagen <img>, ¿cómo hago para que todo el documento para desplazarse hasta una posición en la imagen que acaba de hacer clic en top:20px; left:20px es?

He echado un vistazo aquí para publicaciones similares ... aunque soy bastante nuevo en JavaScript, y quiero entender cómo se logra esto por mí mismo.

Fuente

2011-02-03 Nasir

Duplicado de: [? Cómo desplazarse a un elemento en jQuery] (http: // stackoverflow. com/questions/500336) – hippietrail

159

Como quiera saber cómo funciona, lo explicaré paso a paso.

Primera desea vincular una función como controlador de clic de la imagen:

$('#someImage').click(function() { 
    // Code to do scrolling happens here 
});

que se aplicará el controlador de clic para una imagen con id="someImage". Si desea hacer esto en todas las imágenes, reemplace '#someImage' con 'img'.

Ahora para el código real de desplazamiento:

Obtener las compensaciones de imagen (en relación con el documento):
```
var offset = $(this).offset(); // Contains .top and .left 
```
Restar 20 de top y left:
```
offset.left -= 20; 
offset.top -= 20; 
```

Ahora anima el scroll-top y scroll- propiedades CSS que dejan de <body> y <html>:

$('html, body').animate({ 
    scrollTop: offset.top, 
    scrollLeft: offset.left 
});

Fuente

2011-02-03 10:24:32

Gracias un trillón, no puedo creer que fuera tan simple en comparación con algunas de las otras publicaciones que he visto aquí, Gracias de nuevo – Nasir

Alguien incluso escribió una biblioteca para esto: D – Faiz

Esto parece funcionar incluso mejor que scrollIntoView. ¡Gracias! –

272

Hay un método DOM llamado scrollIntoView, que está soportado por todos los navegadores, que alinear un elemento con la parte superior/izquierda de la ventana gráfica (o tan cerca como sea posible).

$("#myImage")[0].scrollIntoView();

En los navegadores compatibles, puede proporcionar opciones:

$("#myImage")[0].scrollIntoView({ 
    behavior: "smooth", // or "auto" or "instant" 
    block: "start" // or "end" 
});

Alternativamente, si todos los elementos tienen identificadores únicos, sólo puede cambiar la propiedad hash del objeto location de apoyo botón de retroceso/avance :

$(document).delegate("img", function (e) { 
    if (e.target.id) 
     window.location.hash = e.target.id; 
});

Después de eso, simplemente ajustar las propiedades scrollTop/scrollLeft por -20:

document.body.scrollLeft -= 20; 
document.body.scrollTop -= 20;

Fuente

2011-02-03 10:22:12

¡Gracias! 5 otros artículos de SO y lo clavaste a la perfección. Mi caso de uso era un contenedor en un diálogo de arranque que necesita desplazarse a la vista. –

+1 para scrollIntoView – dlchambers

Como nota: '$ (" # myImage ") [0] .scrollIntoView (false);' alineará el elemento en la parte inferior de la ventana. – Philipp

Eche un vistazo al complemento jQuery.scrollTo. Aquí hay un demo.

Este plugin tiene muchas opciones que van más allá de lo que native scrollIntoView te ofrece. Por ejemplo, puede configurar el desplazamiento para que sea uniforme, y luego establecer una devolución de llamada para cuando finalice el desplazamiento.

También puede echar un vistazo a all the JQuery plugins tagged with "scroll".

Fuente

2011-02-03 10:22:16

Estaba obteniendo diferentes compensaciones/posiciones en cada navegador en mi caso, ¡y este complemento me ayudó a solucionarlo! ¡Gracias! – LaurelB

hay métodos para desplazarse elemento directamente en la vista, pero si desea desplazarse a un punto relativo a un elemento, hay que hacerlo de forma manual:

Dentro del controlador de clic, obtener la posición del elemento en relación al documento, restar 20 y utilizar window.scrollTo:

var pos = $(this).offset(); 
var top = pos.top - 20; 
var left = pos.left - 20; 
window.scrollTo((left < 0 ? 0 : left), (top < 0 ? 0 : top));

Fuente

2011-02-03 10:25:46

Mi UI tiene una lista de desplazamiento vertical de pulgares dentro de una barra de pulgar El objetivo era hacer que el pulgar actual estuviera justo en el centro de la barra para pulgar. Comencé con la respuesta aprobada, pero descubrí que había algunos ajustes para centrar verdaderamente el pulgar actual. Espero que esto ayude a alguien más.

marcado:

<ul id='thumbbar'> 
    <li id='thumbbar-123'></li> 
    <li id='thumbbar-124'></li> 
    <li id='thumbbar-125'></li> 
</ul>

jQuery:

// scroll the current thumb bar thumb into view 
heightbar = $('#thumbbar').height(); 
heightthumb = $('#thumbbar-' + pageid).height(); 
offsetbar = $('#thumbbar').scrollTop(); 


$('#thumbbar').animate({ 
    scrollTop: offsetthumb.top - heightbar/2 - offsetbar - 20 
});

Fuente

2013-08-01 01:55:15 xeo

Aquí hay un plugin rápida jQuery para mapear el construido en la funcionalidad del navegador muy bien:

$.fn.ensureVisible = function() { $(this).each(function() { $(this)[0].scrollIntoView(); }); }; 

... 

$('.my-elements').ensureVisible();

Fuente

2014-12-10 17:04:04 Rob

Después de ensayo y error que se me ocurrió con esta función, también funciona con iframe.

function bringElIntoView(el) {  
    var elOffset = el.offset(); 
    var $window = $(window); 
    var windowScrollBottom = $window.scrollTop() + $window.height(); 
    var scrollToPos = -1; 
    if (elOffset.top < $window.scrollTop()) // element is hidden in the top 
     scrollToPos = elOffset.top; 
    else if (elOffset.top + el.height() > windowScrollBottom) // element is hidden in the bottom 
     scrollToPos = $window.scrollTop() + (elOffset.top + el.height() - windowScrollBottom); 
    if (scrollToPos !== -1) 
     $('html, body').animate({ scrollTop: scrollToPos }); 
}

Fuente

2015-05-23 14:26:11

Sólo un consejo. Funciona en Firefox solamente

Element.scrollIntoView();

Fuente

2016-08-27 03:28:08

Esto funciona para todos los navegadores con parámetros booleanos o sin parámetros. Solo el parámetro de objeto más avanzado es menos compatible. – user766304

de acuerdo con https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView hay una falta general de soporte del navegador para este – lfender6445

Ahora está lo suficientemente bien compatible solo con Opera Mini: https: // caniuse .com/# search = scrollIntoView –

solución más simple que he visto

$('html, body').animate({ 
    scrollTop: $("#target-element").offset().top 
}, 1000);

Tutorial Here

Fuente

2017-06-26 02:31:59

¿Cómo obtengo un elemento para desplazarme a la vista, usando jQuery?

Respuesta

Cuestiones relacionadas