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>

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 .

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)

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

window.scrollTo(0, $("#element").offset().top);

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

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

Beispielsweise

row_5.scrollIntoView();

Sie können das Plugin jQuery scrollTo verwenden :

$('div').scrollTo('#row_8');

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.

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

$(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);
  });
});

#pane1 {
  background: #000;
  width: 400px;
  height: 400px;
}

#pane2 {
  background: #ff0000;
  width: 400px;
  height: 400px;
}

#pane3 {
  background: #ccc;
  width: 400px;
  height: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
  <li>
    <a href="#pane1" class=" js-scroll-to-id">Item 1</a>
  </li>
  <li>
    <a href="#pane2" class="js-scroll-to-id">Item 2</a>
  </li>
  <li>
    <a href="#pane3" class=" js-scroll-to-id">Item 3</a>
  </li>
</ul>
<div id="pane1"></div>
<div id="pane2"></div>
<div id="pane3"></div>
<!-- example of a fixed nav menu -->
<ul class="nav">
  <li>
    <a href="#pane3" class="js-scroll-to-id">Item 1</a>
  </li>
  <li>
    <a href="#pane2" class="js-scroll-to-id">Item 2</a>
  </li>
  <li>
    <a href="#pane1" class="js-scroll-to-id">Item 3</a>
  </li>
</ul>

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

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

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

Referenz .

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.

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();

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(){
        });

        }