¿Cómo desplazarse a un elemento específico usando jQuery?


252

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>

Respuestas:


563

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 .


44
Si el contenedor tiene una barra de desplazamiento, deberá tener en cuenta el scrollTop: scrollTo.offset (). Top - container.offset (). Top + container.scrollTop ()
claviska

1
Puede desplazarse por toda la ventana con $ (documento) .scrollTop (valor): el código jquery subyacente resuelve los problemas del navegador por usted.
Chris Moschini

77
Si quieres scrollTocentrado en lugar de en la parte superior:scrollTo.offset().top - container.offset().top + container.scrollTop() - (container.height()/2)
Mahn

77
element.scrollIntoView()- eso es todo lo que se requiere. La animación está estandarizada. Vea developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
WickyNilliams

77
Tenga en cuenta que hay un carácter "invisible" al final del bloque de código. El personaje se considera inválido en Edge, Chrome. - un copy-paster
Attacktive

114

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)

hola @infensus, ¿puedes darme un ejemplo práctico de esta causa porque la mía no funciona? utilicé var section2 = $ ('# section-2'); $ ('html, body'). animate ({scrollTop: section2.offset (). top});
dll_onFire

Eso se ve bien, ¿estás seguro de que la sección 2 existe? do console.log (section2.length); y asegúrese de que no sea 0. Hará un ejemplo en un momento.
Dominic

¿Por qué $('html,body')? Solo necesita en un recipiente específico. La respuesta aceptada es mejor para mí. Tengo un caso similar al de la pregunta y su respuesta no me funcionó.
Petroff

2
@Petroff extrañamente cuando escribí esto, no noté que el elemento estaba en un contenedor de desplazamiento. Sin embargo, dejaré mi respuesta porque las personas vienen aquí de una búsqueda en Google para desplazarse por el cuerpo debido al título de la pregunta
Dominic

30

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

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

Para algo que debería ser tan simple, he pasado años en otras soluciones en línea, pero este simple revestimiento hace exactamente lo que necesito.
Laurence Cope

3
Cabe señalar, de esta manera funciona para toda la ventana. Si desea desplazar el contenido que tiene desbordamiento: desplácese, entonces esto no funcionará.
Jeremy

12

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

Tu esencia de una línea, completa con animación, era exactamente lo que necesitaba. ¡Gracias!
Scott Smith

No need for any plugins?? ¡Pero usas jQuery! Es una gran biblioteca, ni siquiera un complemento.
Verde

1
Le digo que no necesita agregar una referencia además de la referencia de la biblioteca jquery. Además, jquery es una especie de estándar de la industria. ¿Por qué no lo usarías? Probablemente sea bastante factible sin jquery, pero aún requeriría que alguien escriba mucho código solo para la parte de análisis. Se siente contraproducente. Y se sintió contraproducente escribir un complemento completo solo para desplazarse a un div mísero.
lorddarq

4

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

Por ejemplo

row_5.scrollIntoView();

¿Cómo animarlo?
Verde

No hay necesidad de animar. Cuando use scrollIntoView (), el control se desplazará automáticamente para que se muestre en la vista.
Tamilarasi


2

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.


2

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


1

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

@ AnriëtteMyburgh no estoy seguro de si position () es funcional en todos los navegadores. ¿Lo has probado en otros para ver si funciona? ¿O puedo ver el código que está usando y ver si hay algo más mal?
Nlinscott

1

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 .


66
scrollTo requiere dos argumentos, solo ha escrito en uno.
NuclearPeon

2
... y se llama en el objeto de la ventana.
hashchange

1

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.


0

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

0

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

        }
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.