Tengo una gran mesa con barra de desplazamiento vertical. Me gustaría desplazarme a una línea específica en esta tabla usando jQuery / Javascript.

¿Hay métodos integrados para hacer esto?

Aquí hay un pequeño ejemplo para jugar.

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>

Muy simple. No se necesitan complementos .

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

Aquí hay un ejemplo de trabajo .

Documentación parascrollTop .

Me doy cuenta de que esto no responde al desplazamiento en un contenedor, pero la gente lo encuentra útil, así que:

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

Seleccionamos html y body porque el desplazador de documentos podría estar activado y es difícil determinar cuál. Para los navegadores modernos puede salirse con la suya $(document.body).

O, para ir a la parte superior de la página:

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

O sin animación:

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

O...

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

Estoy de acuerdo con Kevin y otros, usar un complemento para esto no tiene sentido.

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

Me las arreglé para hacerlo yo mismo. No es necesario ningún complemento. Mira mi esencia :

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

Puede usar el scrollIntoView()método en javascript. solo daid.scrollIntoView();

Por ejemplo

row_5.scrollIntoView();

Puede usar el complemento jQuery scrollTo plugin:

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

Desplazar elemento al centro del contenedor

Para llevar el elemento al centro del contenedor.

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

No es exacto al centro, pero no lo reconocerá en elementos más grandes y más grandes.

Puede desplazarse por jQuery y JavaScript. Solo necesita dos elementos jQuery y este código 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>

Hice una combinación de lo que otros han publicado. Es simple y suave

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

No estoy seguro de por qué nadie dice lo obvio, ya que hay una función integrada de JavaScript scrollTo:

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

Referencia .

Contrariamente a lo que la mayoría de las personas aquí están sugiriendo, me gustaría recomendar que hace uso de un plugin si desea animar el movimiento. Solo animar scrollTop no es suficiente para una experiencia de usuario fluida. Vea mi respuesta aquí para el razonamiento.

He intentado varios complementos a lo largo de los años, pero finalmente escribí uno yo mismo. Es posible que desee darle una vuelta: jQuery.scrollable . Usando eso, la acción de desplazamiento se convierte

$container.scrollTo( targetPosition );

Pero eso no es todo. También necesitamos fijar la posición objetivo. El cálculo que ves en otras respuestas,

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

En su mayoría funciona, pero no es del todo correcto. No maneja el borde del contenedor de desplazamiento correctamente. El elemento de destino se desplaza hacia arriba demasiado lejos, por el tamaño del borde. Aquí hay una demostración.

Por lo tanto, una mejor manera de calcular la posición objetivo es

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

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

Nuevamente, eche un vistazo a la demostración para verla en acción.

Para una función que devuelve la posición de destino y funciona tanto para contenedores de desplazamiento con ventana como sin ventana, siéntase libre de usar esta esencia . Los comentarios allí explican cómo se calcula la posición.

Al principio, he dicho que sería mejor usar un complemento para el desplazamiento animado . Sin embargo, no necesita un complemento si desea saltar al objetivo sin una transición. Vea la respuesta de @James para eso, pero asegúrese de calcular la posición de destino correctamente si hay un borde alrededor del contenedor.

Por lo que vale, así es como logré lograr ese comportamiento para un elemento general que puede estar dentro de un DIV con desplazamiento (sin conocer el contenedor)

Crea una entrada falsa de la altura del elemento de destino, y luego lo enfoca, y el navegador se encargará del resto sin importar cuán profundo dentro de la jerarquía de desplazamiento se encuentre. Funciona de maravilla.

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

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

Hice esta combinación Es trabajo para mí. pero enfrenta un problema si hacer clic en mover ese tamaño de div es demasiado grande y no desplazarse hacia abajo a este div en particular.

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

        }