Wie scrolle ich zu einem Element in einem überfüllten Div?

Ich habe 20 Listenelemente in einem Div, die jeweils nur 5 anzeigen können. Was ist ein guter Weg, um zu Punkt 10 und dann zu Punkt 20 zu scrollen? Ich kenne die Höhe aller Gegenstände.

Das scrollToPlugin macht das, aber seine Quelle ist nicht sehr einfach zu verstehen, ohne wirklich darauf einzugehen. Ich möchte dieses Plugin nicht verwenden.

Lassen Sie uns sagen , dass ich eine Funktion, die zwei Elemente nimmt $parentDiv, $innerListItemweder $innerListItem.offset().topnoch $innerListItem.positon().topgibt mir die richtige scrollTop für $ parentDiv.

Das $innerListItem.position().topist tatsächlich relativ zu dem .scrollTop()seines zuerst positionierten Vorfahren. Um den richtigen $parentDiv.scrollTop()Wert zu berechnen , müssen Sie zunächst sicherstellen, dass er $parentDivpositioniert ist. Wenn es noch keine explizite hat position, verwenden Sie position: relative. Die Elemente $innerListItemund alle ihre Vorfahren $parentDivmüssen keine explizite Position haben. Jetzt können Sie zu scrollen $innerListItemmit:

// Scroll to the top
$parentDiv.scrollTop($parentDiv.scrollTop() + $innerListItem.position().top);

// Scroll to the center
$parentDiv.scrollTop($parentDiv.scrollTop() + $innerListItem.position().top
    - $parentDiv.height()/2 + $innerListItem.height()/2);

Dies ist mein eigenes Plugin (positioniert das Element oben in der Liste. Speziell für overflow-y : auto. Funktioniert möglicherweise nicht mit overflow-x!):

HINWEIS : elemist der HTML-Selektor eines Elements, zu dem die Seite gescrollt wird. Alles , was von jQuery unterstützt, wie: #myid, div.myclass, $(jquery object), [dom - Objekt] usw.

jQuery.fn.scrollTo = function(elem, speed) { 
    $(this).animate({
        scrollTop:  $(this).scrollTop() - $(this).offset().top + $(elem).offset().top 
    }, speed == undefined ? 1000 : speed); 
    return this; 
};

Wenn Sie es nicht zum Animieren benötigen, verwenden Sie:

jQuery.fn.scrollTo = function(elem) { 
    $(this).scrollTop($(this).scrollTop() - $(this).offset().top + $(elem).offset().top); 
    return this; 
};

Wie benutzt man:

$("#overflow_div").scrollTo("#innerItem");
$("#overflow_div").scrollTo("#innerItem", 2000); //custom animation speed 

Hinweis: #innerItemKann überall drinnen sein #overflow_div. Es muss nicht unbedingt ein direktes Kind sein.

Getestet in Firefox (23) und Chrome (28).

Wenn Sie die gesamte Seite scrollen möchten, überprüfen Sie diese Frage .

Ich habe die Antwort von Glenn Moss angepasst, um der Tatsache Rechnung zu tragen, dass der Überlauf div möglicherweise nicht oben auf der Seite steht.

parentDiv.scrollTop(parentDiv.scrollTop() + (innerListItem.position().top - parentDiv.position().top) - (parentDiv.height()/2) + (innerListItem.height()/2)  )

Ich habe dies in einer Google Maps-Anwendung mit einer reaktionsfähigen Vorlage verwendet. Bei einer Auflösung> 800px befand sich die Liste auf der linken Seite der Karte. Bei einer Auflösung <800 befand sich die Liste unterhalb der Karte.

Die obigen Antworten positionieren das innere Element oben auf dem Überlaufelement, auch wenn es innerhalb des Überlaufelements sichtbar ist. Ich wollte das nicht, also habe ich es so geändert, dass die Bildlaufposition nicht geändert wird, wenn das Element angezeigt wird.

jQuery.fn.scrollTo = function(elem, speed) {
    var $this = jQuery(this);
    var $this_top = $this.offset().top;
    var $this_bottom = $this_top + $this.height();
    var $elem = jQuery(elem);
    var $elem_top = $elem.offset().top;
    var $elem_bottom = $elem_top + $elem.height();

    if ($elem_top > $this_top && $elem_bottom < $this_bottom) {
        // in view so don't do anything
        return;
    }
    var new_scroll_top;
    if ($elem_top < $this_top) {
        new_scroll_top = {scrollTop: $this.scrollTop() - $this_top + $elem_top};
    } else {
        new_scroll_top = {scrollTop: $elem_bottom - $this_bottom + $this.scrollTop()};
    }
    $this.animate(new_scroll_top, speed === undefined ? 100 : speed);
    return this;
};

Ich schreibe diese 2 Funktionen, um mein Leben leichter zu machen:

function scrollToTop(elem, parent, speed) {
    var scrollOffset = parent.scrollTop() + elem.offset().top;
    parent.animate({scrollTop:scrollOffset}, speed);
    // parent.scrollTop(scrollOffset, speed);
}

function scrollToCenter(elem, parent, speed) {
    var elOffset = elem.offset().top;
    var elHeight = elem.height();
    var parentViewTop = parent.offset().top;
    var parentHeight = parent.innerHeight();
    var offset;

    if (elHeight >= parentHeight) {
        offset = elOffset;
    } else {
        margin = (parentHeight - elHeight)/2;
        offset = elOffset - margin;
    }

    var scrollOffset = parent.scrollTop() + offset - parentViewTop;

    parent.animate({scrollTop:scrollOffset}, speed);
    // parent.scrollTop(scrollOffset, speed);
}

Und benutze sie:

scrollToTop($innerListItem, $parentDiv, 200);
// or
scrollToCenter($innerListItem, $parentDiv, 200);

Nachdem ich sehr lange damit gespielt hatte, kam ich auf Folgendes:

    jQuery.fn.scrollTo = function (elem) {
        var b = $(elem);
        this.scrollTop(b.position().top + b.height() - this.height());
    };

und ich nenne es so

$("#basketListGridHolder").scrollTo('tr[data-uid="' + basketID + '"]');