Wie scrolle ich mit jQuery zu einem bestimmten Element?

252

Ich habe einen großen Tisch mit vertikaler Bildlaufleiste. Ich möchte mit jQuery / Javascript zu einer bestimmten Zeile in dieser Tabelle scrollen.

Gibt es dafür eingebaute Methoden?

Hier ist ein kleines Beispiel zum Spielen.

div {
    width: 100px;
    height: 70px;
    border: 1px solid blue;
    overflow: auto;
}
<div>
    <table id="my_table">
        <tr id='row_1'><td>1</td></tr>
        <tr id='row_2'><td>2</td></tr>
        <tr id='row_3'><td>3</td></tr>
        <tr id='row_4'><td>4</td></tr>
        <tr id='row_5'><td>5</td></tr>
        <tr id='row_6'><td>6</td></tr>
        <tr id='row_7'><td>7</td></tr>
        <tr id='row_8'><td>8</td></tr>
        <tr id='row_9'><td>9</td></tr>
    </table>
</div>

Mischa Moroshko
quelle

Antworten:

562

Ganz einfach. Keine Plugins erforderlich .

var $container = $('div'),
    $scrollTo = $('#row_8');

$container.scrollTop(
    $scrollTo.offset().top - $container.offset().top + $container.scrollTop()
);

// Or you can animate the scrolling:
$container.animate({
    scrollTop: $scrollTo.offset().top - $container.offset().top + $container.scrollTop()
});​

Hier ist ein Arbeitsbeispiel .

Dokumentation fürscrollTop .

James
quelle
4
Wenn der Container eine Bildlaufleiste hat, müssen Sie das scrollTop berücksichtigen: scrollTo.offset (). Top - container.offset (). Top + container.scrollTop ()
claviska
1
Sie können das gesamte Fenster mit $ (document) .scrollTop (value) scrollen - der zugrunde liegende JQuery-Code behebt Browserprobleme für Sie.
Chris Moschini
7
Wenn Sie scrollToeher zentriert als oben wollen:scrollTo.offset().top - container.offset().top + container.scrollTop() - (container.height()/2)
Mahn
7
element.scrollIntoView()- das ist alles was benötigt wird. Die Animation ist standardisiert. Siehe developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
WickyNilliams
7
Beachten Sie, dass sich am Ende des Codeblocks ein "unsichtbares" Zeichen befindet. Das Zeichen wird in Edge, Chrome, als ungültig betrachtet. - ein Copy-
Paster
114

Mir ist klar, dass dies nicht das Scrollen in einem Container beantwortet, aber die Leute finden es nützlich, also:

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

Wir wählen sowohl HTML als auch Body aus, da der Dokument-Scroller möglicherweise aktiviert ist und es schwierig ist, festzustellen, welcher. Für moderne Browser können Sie mit durchkommen $(document.body).

Oder um zum Anfang der Seite zu gelangen:

$('html,body').animate({scrollTop: 0});

Oder ohne Animation:

$(window).scrollTop(some_element.offset().top);

ODER...

window.scrollTo(0, some_element.offset().top); // native equivalent (x, y)
Dominic
quelle
hallo @infensus kannst du mir ein funktionierendes Beispiel dafür geben, weil meins nicht funktioniert? ich habe var section2 = $ ('# section-2') verwendet; $ ('html, body'). animate ({scrollTop: section2.offset (). top});
dll_onFire
Das sieht gut aus - sind Sie sicher, dass Abschnitt 2 existiert? do console.log (section2.length); und stellen Sie sicher, dass es nicht 0 ist. Wird in Kürze ein Beispiel geben.
Dominic
Warum $('html,body')? Er braucht nur in bestimmten Container. Akzeptierte Antwort ist besser für mich. Ich habe einen ähnlichen Fall wie die gestellte Frage und Ihre Antwort hat bei mir nicht funktioniert.
Petroff
2
@Petroff seltsamerweise habe ich beim Schreiben nicht bemerkt, dass sich das Element in einem Bildlaufcontainer befindet. Ich werde meine Antwort so lassen, wie sie ist, weil Leute von einer Google-Suche hierher kommen, um den Körper aufgrund des
Dominic
30

Ich stimme Kevin und anderen zu, ein Plugin dafür zu verwenden ist sinnlos.

window.scrollTo(0, $("#element").offset().top);
Fredrik Stolpe
quelle
Für etwas, das so einfach sein sollte, habe ich lange Zeit mit anderen Online-Lösungen verbracht, aber dieser einfache Einzeiler macht genau das, was ich brauche.
Laurence Cope
3
Es ist zu beachten, dass dieser Weg für das gesamte Fenster funktioniert. Wenn Sie durch überlaufenen Inhalt scrollen möchten: Scrollen, funktioniert dies nicht.
Jeremy
12

Ich habe es selbst geschafft. Keine Plugins erforderlich. Schauen Sie sich mein Wesentliches an :

// Replace #fromA with your button/control and #toB with the target to which     
// You wanna scroll to. 
//
$("#fromA").click(function() {
    $("html, body").animate({ scrollTop: $("#toB").offset().top }, 1500);
});
Lorddarq
quelle
Ihr einzeiliger Kern mit Animation war genau das, was ich brauchte. Vielen Dank!
Scott Smith
No need for any plugins?? Aber du benutzt jQuery! Es ist eine verdammt große Bibliothek, nicht einmal ein Plugin.
Grün
1
Ich erwähne, dass Sie zusätzlich zur Referenz der jquery-Bibliothek keine Referenz hinzufügen müssen. Plus jquery ist eine Art Industriestandard. Warum würdest du es nicht benutzen? Es ist wahrscheinlich ohne jquery durchaus machbar, aber es würde immer noch jemanden erfordern, der viel Code nur für den Parsing-Teil schreibt. Es fühlt sich kontraproduktiv an. Und es fühlte sich kontraproduktiv an, ein volles Plugin zu schreiben, nur um zu einem miesen Div zu scrollen.
Lord Darq
4

Sie können die scrollIntoView()Methode in Javascript verwenden. Gib einfachid.scrollIntoView();

Beispielsweise

row_5.scrollIntoView();
Tamilarasi
quelle
Wie animiere ich es?
Grün
Keine Notwendigkeit zu animieren. Wenn Sie scrollIntoView () verwenden, wird das Steuerelement automatisch gescrollt, damit es in der Ansicht angezeigt wird.
Tamilarasi
4

Sie können das Plugin jQuery scrollTo verwenden :

$('div').scrollTo('#row_8');
nickf
quelle
1
Der Link ist nicht mehr verfügbar. Könnten Sie es bitte aktualisieren?
Glücklicher
2

Scrollen Sie das Element zur Mitte des Containers

Um das Element in die Mitte des Containers zu bringen.

DEMO zu CODEPEN

JS

function scrollToCenter() {
  var container = $('.container'),
    scrollTo = $('.5');

  container.animate({
    //scrolls to center
    scrollTop: scrollTo.offset().top - container.offset().top + scrollTo.scrollTop() - container.height() / 2
  });
}

HTML

<div class="container">
   <div class="1">
    1
  </div>
  <div class="2">
    2
  </div>
  <div class="3">
    3
  </div>
  <div class="4">
    4
  </div>
  <div class="5">
    5
  </div>
  <div class="6">
    6
  </div>
  <div class="7">
    7
  </div>
  <div class="8">
    8
  </div>
  <div class="9">
    9
  </div>
  <div class="10">
    10
  </div>


</div>
<br>
<br>
<button id="scroll" onclick="scrollToCenter()">
  Scroll
</button>

CSS

.container {
  height: 60px;
  overflow-y: scroll;
  width 60px;
  background-color: white;
}

Es ist nicht exakt zur Mitte, aber Sie werden es bei größeren größeren Elementen nicht erkennen.

basti500
quelle
2

Sie können mit jQuery und JavaScript scrollen. Sie benötigen lediglich zwei jQuery-Elemente und diesen JavaScript-Code:

$(function() {
  // Generic selector to be used anywhere
  $(".js-scroll-to-id").click(function(e) {

    // Get the href dynamically
    var destination = $(this).attr('href');

    // Prevent href=“#” link from changing the URL hash (optional)
    e.preventDefault();

    // Animate scroll to destination
    $('html, body').animate({
      scrollTop: $(destination).offset().top
    }, 1500);
  });
});

MD Ashik
quelle
1

Ich habe eine Kombination aus dem gemacht, was andere gepostet haben. Es ist einfach und glatt

 $('#myButton').click(function(){
        $('html, body').animate({
            scrollTop: $('#scroll-to-this-element').position().top },
            1000
        );
    });
Nlinscott
quelle
@ AnriëtteMyburgh Ich bin mir nicht sicher, ob position () in allen Browsern funktioniert. Haben Sie es in anderen versucht, um zu sehen, ob es funktioniert? Oder kann ich den von Ihnen verwendeten Code sehen und sehen, ob etwas anderes nicht stimmt?
Nlinscott
1

Ich bin mir nicht sicher, warum niemand das Offensichtliche sagt, da es eine eingebaute Javascript- scrollToFunktion gibt:

scrollTo( $('#element').position().top );

Referenz .

Kevin
quelle
6
scrollTo erfordert zwei Argumente, Sie haben nur eines geschrieben.
NuclearPeon
2
... und es wird auf dem Fensterobjekt aufgerufen.
Hashchange
1

Im Gegensatz zu dem, was die meisten Leute hier sind darauf hindeutet, würde ich empfehlen Sie tun ein Plugin verwenden , wenn Sie die Bewegung animieren möchten. Nur das Animieren von scrollTop reicht für eine reibungslose Benutzererfahrung nicht aus. Siehe meine Antwort hier für die Begründung.

Ich habe im Laufe der Jahre eine Reihe von Plugins ausprobiert, aber schließlich selbst eines geschrieben. Vielleicht möchten Sie es ausprobieren : jQuery.scrollable . Damit wird die Bildlaufaktion

$container.scrollTo( targetPosition );

Aber das ist nicht alles. Wir müssen auch die Zielposition festlegen. Die Berechnung, die Sie in anderen Antworten sehen,

$target.offset().top - $container.offset().top + $container.scrollTop()

funktioniert meistens aber ist nicht ganz richtig. Der Rand des Bildlaufcontainers wird nicht richtig behandelt. Das Zielelement wird um die Größe des Rahmens zu weit nach oben gescrollt. Hier ist eine Demo.

Daher ist eine bessere Methode zur Berechnung der Zielposition

var target = $target[0], 
    container = $container[0];

targetPosition = $container.scrollTop() + target.getBoundingClientRect().top - container.getBoundingClientRect().top - container.clientTop;

Schauen Sie sich noch einmal die Demo an, um sie in Aktion zu sehen.

Für eine Funktion, die die Zielposition zurückgibt und sowohl für Fenster- als auch für Nicht-Fenster- Bildlaufcontainer funktioniert , können Sie diese Übersicht verwenden . Die Kommentare dort erklären, wie die Position berechnet wird.

Am Anfang habe ich gesagt, es wäre am besten, ein Plugin für animiertes Scrollen zu verwenden. Sie benötigen jedoch kein Plugin, wenn Sie ohne Übergang zum Ziel springen möchten. Siehe dazu die Antwort von @James , aber stellen Sie sicher, dass Sie die Zielposition korrekt berechnen, wenn sich um den Container ein Rand befindet.

Hashwechsel
quelle
0

Auf diese Weise habe ich es geschafft, ein solches Verhalten für ein allgemeines Element zu erreichen, das sich in einem DIV mit Bildlauf befinden kann (ohne den Container zu kennen).

Es erstellt eine gefälschte Eingabe der Höhe des Zielelements und legt dann einen Fokus darauf. Der Browser kümmert sich um den Rest, egal wie tief Sie sich in der scrollbaren Hierarchie befinden. Klappt wunderbar.

var $scrollTo = $('#someId'),
inputElem = $('<input type="text"></input>');

$scrollTo.prepend(inputElem);
inputElem.css({
  position: 'absolute',
  width: '1px',
  height: $scrollTo.height()
});
inputElem.focus();
inputElem.remove();
martinh_kentico
quelle
0

Ich habe diese Kombination gemacht. seine Arbeit für mich. Wenn Sie jedoch auf "Verschieben" klicken, ist die Div-Größe zu groß, sodass die Szenerie nicht nach unten zu diesem bestimmten Div scrollen kann.

 var scrollDownTo =$("#show_question_" + nQueId).position().top;
        console.log(scrollDownTo);
        $('#slider_light_box_container').animate({
            scrollTop: scrollDownTo
            }, 1000, function(){
        });

        }
scode2704
quelle