webentwicklung-frage-antwort-db.com.de

Wie bekomme ich ein Element, um mit jQuery in die Ansicht zu scrollen?

Ich habe ein HTML-Dokument mit Bildern in einem Rasterformat mit <ul><li><img.... Das Browserfenster kann sowohl vertikal als auch horizontal verschoben werden. 

Frage: Wenn ich auf ein Bild <img> klicke, wie kann ich dann das gesamte Dokument zu einer Position scrollen, an der das Bild, auf das ich gerade geklickt habe, top:20px; left:20px ist?

Ich habe hier nach ähnlichen Beiträgen gestöbert ... obwohl ich JavaScript noch nicht kennen und wissen möchte, wie das für mich selbst erreicht wird.

136
Nasir

Da Sie wissen möchten, wie es funktioniert, erkläre ich es Schritt für Schritt.

Zuerst möchten Sie eine Funktion als Klick-Handler des Bildes binden:

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

Dadurch wird der Click-Handler auf ein Bild mit id="someImage" angewendet. Wenn Sie dies für all images tun möchten, ersetzen Sie '#someImage' durch 'img'.

Nun zum aktuellen Scrollcode:

  1. Holen Sie sich die Bildversätze (relativ zum Dokument):

    var offset = $(this).offset(); // Contains .top and .left
    
  2. Subtrahieren Sie 20 von top und left:

    offset.left -= 20;
    offset.top -= 20;
    
  3. Animieren Sie jetzt die Scroll-Top- und Scroll-Left-CSS-Eigenschaften von <body> und <html>:

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

Es gibt eine DOM-Methode namens scrollIntoView , die von allen gängigen Browsern unterstützt wird und ein Element an der oberen/linken Seite des Ansichtsfensters (oder so nah wie möglich) ausrichtet.

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

Auf unterstützten Browsern können Sie Optionen anbieten:

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

Wenn alle Elemente über eindeutige IDs verfügen, können Sie alternativ einfach die hash-Eigenschaft des location - Objekts für die Unterstützung der Zurück/Vorwärts-Schaltfläche ändern:

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

Danach passen Sie die Eigenschaften von scrollTop/scrollLeft um -20 an:

document.body.scrollLeft -= 20;
document.body.scrollTop -= 20;
321
Andy E

Einfachste Lösung, die ich gesehen habe

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

Tutorial hier

7
Matt Watson

Schauen Sie sich das jQuery.scrollTo plugin an. Hier ist eine Demo .

Dieses Plugin hat viele Optionen, die über das, was native scrollIntoView Ihnen bietet, hinausgehen. Beispielsweise können Sie den Bildlauf glatt einstellen und dann einen Rückruf für den Abschluss des Bildlaufs festlegen.

Sie können auch alle mit "scroll" gekennzeichneten JQuery-Plugins ansehen.

Es gibt Methoden, um Elemente direkt in die Ansicht zu scrollen. Wenn Sie jedoch relativ zu einem Punkt von einem Element aus scrollen möchten, müssen Sie dies manuell tun:

Ermitteln Sie im Click-Handler die Position des Elements relativ zum Dokument, subtrahieren Sie 20 und verwenden Sie 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));
7
Felix Kling

Hier ist ein schnelles jQuery-Plugin, mit dem Sie die integrierte Browser-Funktionalität gut zuordnen können:

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

...

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

Nur ein Hinweis. Funktioniert nur mit Firefox

Element.scrollIntoView ();

3
wp student

Nach Versuch und Irrtum habe ich mir diese Funktion ausgedacht, funktioniert auch mit 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 });
}
2
Tone Škoda

Meine Benutzeroberfläche verfügt über eine vertikale Bildlaufliste mit Daumen in einer Thumbbar. Das Ziel bestand darin, den aktuellen Daumen in der Mitte der Thumbbar genau zu machen. Ich begann mit der genehmigten Antwort, stellte jedoch fest, dass es ein paar Verbesserungen gab Richten Sie den aktuellen Daumen wirklich aus. hoffe das hilft jemand anderem.

markup:

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

Einfache 2 Schritte zum Scrollen nach unten oder unten. 

Schritt 1: Holen Sie sich die volle Höhe des scrollbaren (Konversations) div.

Schritt2: Wenden Sie scrollTop auf das scrollbare Div (div) mit dem Wert in Schritt 1 erhalten.

var fullHeight = $('#conversation')[0].scrollHeight;

$('#conversation').scrollTop(fullHeight);

Die oben genannten Schritte müssen für jeden Anhang des Konversationsdivits angewendet werden.

0
Shiva Kumar P

Nachdem ich versucht hatte, eine Lösung zu finden, die alle Umstände abdeckt (Optionen zum Animieren des Bildlaufs, Auffüllen des Objekts, sobald es angezeigt wird, funktioniert auch unter ungeklärten Umständen, z. B. in einem Iframe), schrieb ich schließlich meine eigene Lösung dafür. Da es zu funktionieren scheint, wenn viele andere Lösungen versagen, dachte ich, ich würde es teilen:

function scrollIntoViewIfNeeded($target, options) {

    var options = options ? options : {},
    $win = $($target[0].ownerDocument.defaultView), //get the window object of the $target, don't use "window" because the element could possibly be in a different iframe than the one calling the function
    $container = options.$container ? options.$container : $win,        
    padding = options.padding ? options.padding : 20,
    elemTop = $target.offset().top,
    elemHeight = $target.outerHeight(),
    containerTop = $container.scrollTop(),
    //Everything past this point is used only to get the container's visible height, which is needed to do this accurately
    containerHeight = $container.outerHeight(),
    winTop = $win.scrollTop(),
    winBot = winTop + $win.height(),
    containerVisibleTop = containerTop < winTop ? winTop : containerTop,
    containerVisibleBottom = containerTop + containerHeight > winBot ? winBot : containerTop + containerHeight,
    containerVisibleHeight = containerVisibleBottom - containerVisibleTop;

    if (elemTop < containerTop) {
        //scroll up
        if (options.instant) {
            $container.scrollTop(elemTop - padding);
        } else {
            $container.animate({scrollTop: elemTop - padding}, options.animationOptions);
        }
    } else if (elemTop + elemHeight > containerTop + containerVisibleHeight) {
        //scroll down
        if (options.instant) {
            $container.scrollTop(elemTop + elemHeight - containerVisibleHeight + padding);
        } else {
            $container.animate({scrollTop: elemTop + elemHeight - containerVisibleHeight + padding}, options.animationOptions);
        }
    }
}

$target ist ein jQuery-Objekt, das das Objekt enthält, in das Sie bei Bedarf scrollen möchten.

options (optional) kann die folgenden in einem Objekt übergebenen Optionen enthalten:

options.$container - Ein jQuery-Objekt, das auf das enthaltende Element von $ target verweist (mit anderen Worten, das Element im dom mit den Bildlaufleisten). Der Standardwert ist das Fenster, das das $ target-Element enthält und intelligent genug ist, um ein iframe-Fenster auszuwählen. Denken Sie daran, das $ in den Eigenschaftsnamen aufzunehmen.

options.padding - Der Abstand in Pixeln, der über oder unter dem Objekt eingefügt wird, wenn es in die Ansicht gerollt wird. Auf diese Weise liegt es nicht direkt am Fensterrand an. Der Standardwert ist 20.

options.instant - Wenn diese Option auf true gesetzt ist, wird jQuery animate nicht verwendet und der Bildlauf wird sofort an die richtige Position verschoben. Der Standardwert ist false.

options.animationOptions - Jegliche jQuery-Optionen, die Sie an die jQuery-Animationsfunktion übergeben möchten (siehe http://api.jquery.com/animate/ ). Hiermit können Sie die Dauer der Animation ändern oder eine Rückruffunktion ausführen lassen, wenn der Bildlauf abgeschlossen ist. Dies funktioniert nur, wenn options.instant auf false gesetzt ist. Wenn Sie eine sofortige Animation mit einem Rückruf benötigen, legen Sie options.animationOptions.duration = 0 fest, anstatt options.instant = true zu verwenden.

0
dallin