Ho un grande tavolo con barra di scorrimento verticale. Vorrei scorrere fino a una riga specifica in questa tabella usando jQuery / Javascript.

Ci sono metodi integrati per farlo?

Ecco un piccolo esempio con cui giocare.

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>

Semplicemente morto. Nessun plug-in necessario .

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

Ecco un esempio funzionante .

Documentazione perscrollTop .

Mi rendo conto che questo non risponde allo scorrimento in un contenitore, ma le persone lo trovano utile quindi:

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

Selezioniamo sia html sia body perché lo scroller di documenti potrebbe trovarsi su uno dei due ed è difficile determinare quale. Per i browser moderni puoi cavartela $(document.body).

Oppure, per andare all'inizio della pagina:

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

O senza animazione:

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

O...

window.scrollTo(0, some_element.offset().top); // native equivalent (x, y)

Sono d'accordo con Kevin e altri, usare un plugin per questo è inutile.

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

Sono riuscito a farlo da solo. Non è necessario alcun plug-in. Dai un'occhiata al mio succo :

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

Puoi usare il scrollIntoView()metodo in javascript. dai e bastaid.scrollIntoView();

Per esempio

row_5.scrollIntoView();

È possibile utilizzare il plugin plugin jQuery scrollTo :

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

Scorri l'elemento fino al centro del contenitore

Per portare l'elemento al centro del contenitore.

DEMO su 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;
}

Non è esatto al centro ma non lo riconoscerai su elementi più grandi più grandi.

Puoi scorrere con jQuery e JavaScript Hai solo bisogno di due elementi jQuery e questo codice JavaScript:

$(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>

Ho fatto una combinazione di ciò che altri hanno pubblicato. È semplice e fluido

 $('#myButton').click(function(){
        $('html, body').animate({
            scrollTop: $('#scroll-to-this-element').position().top },
            1000
        );
    });

Non sono sicuro del motivo per cui nessuno dice l'ovvio, in quanto esiste una scrollTofunzione javascript integrata:

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

Riferimento .

Contrariamente a quanto la maggior parte delle persone qui sono suggerendo, vi consiglio di fare utilizzare un plugin se si desidera animare il movimento. L'animazione di scrollTop non è sufficiente per un'esperienza utente fluida. Vedi la mia risposta qui per il ragionamento.

Ho provato diversi plugin nel corso degli anni, ma alla fine ne ho scritto uno da solo. Potresti voler fare un giro: jQuery.scrollable . Usando quello, l'azione di scorrimento diventa

$container.scrollTo( targetPosition );

Ma non è tutto. Dobbiamo anche fissare la posizione target. Il calcolo che vedi in altre risposte,

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

per lo più funziona ma non è del tutto corretto. Non gestisce correttamente il bordo del contenitore di scorrimento. L'elemento target viene fatto scorrere troppo verso l'alto, in base alla dimensione del bordo. Ecco una demo.

Quindi, un modo migliore per calcolare la posizione target è

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

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

Ancora una volta, dai un'occhiata alla demo per vederla in azione.

Per una funzione che restituisce la posizione di destinazione e funziona sia per i contenitori di scorrimento per finestre sia per quelli senza finestre, non esitate a usare questa sintesi . I commenti lì dentro spiegano come viene calcolata la posizione.

All'inizio, ho detto che sarebbe meglio usare un plugin per lo scorrimento animato . Non è necessario un plug-in, tuttavia, se si desidera passare all'obiettivo senza transizione. Vedi la risposta di @James per questo, ma assicurati di calcolare correttamente la posizione di destinazione se c'è un bordo attorno al contenitore.

Per quello che vale, è così che sono riuscito a ottenere un simile comportamento per un elemento generale che può essere all'interno di un DIV con scorrimento (senza conoscere il contenitore)

Crea un falso input dell'altezza dell'elemento target, quindi si concentra su di esso, e il browser si occuperà del resto, non importa quanto in profondità vi troviate nella gerarchia scorrevole. Funziona come un fascino.

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

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

Ho fatto questa combinazione. funziona per me. ma di fronte a un problema se il clic sposta la dimensione del div in modo troppo grande che lo scenario non scorre fino a questo div specifico.

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

        }