¿Cómo consigo que un elemento se desplace a la vista usando jQuery?

Tengo un documento HTML con imágenes en formato grid usando <ul><li><img.... La ventana del navegador tiene desplazamiento vertical y horizontal.

Pregunta: Cuando hago clic en una imagen <img>, ¿cómo puedo hacer que todo el documento se desplace a una posición donde está la imagen en la que acabo de hacer clic top:20px; left:20px?

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

Feb 03 '11 17:02 Nasir

Hay un método DOM llamado scrollIntoView, que es compatible con todos los principales navegadores, que alineará un elemento con la parte superior/izquierda de la ventana gráfica (o lo más cerca 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 ID únicos, puede simplemente cambiar la hashpropiedad del locationobjeto para que admita el botón Atrás/Adelante:

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

Después de eso, simplemente ajuste las propiedades scrollTop/ scrollLeften -20:

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

Feb 03 '2011 10:02 Andy E

Como quieres saber cómo funciona, te lo explico paso a paso.

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

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

Eso aplicará el controlador de clic a una imagen con id="someImage". Si desea hacer esto con todas las imágenes, reemplácelas '#someImage'con 'img'.

Ahora para el código de desplazamiento real:

Obtenga los desplazamientos de la imagen (en relación con el documento):
```
var offset = $(this).offset(); // Contains .top and .left
```
Resta 20 de topy left:
```
offset.left -= 20;
offset.top -= 20;
```

Ahora anime las propiedades CSS de desplazamiento superior e izquierdo de <body>y <html>:

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

Feb 03 '2011 10:02 David Tang

La solución más simple que he visto.

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

Tutorial aquí

Jun 26 '2017 02:06 Matt Watson