Come scorrere fino a un elemento specifico usando jQuery?


252

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>

Risposte:


563

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 .


4
Se il contenitore ha una barra di scorrimento, dovrai tenere conto di scrollTop: scrollTo.offset (). Top - container.offset (). Top + container.scrollTop ()
claviska

1
Puoi scorrere l'intera finestra con $ (documento) .scrollTop (valore): il codice jquery sottostante risolve i problemi del browser per te.
Chris Moschini,

7
Se vuoi scrollTocentrare piuttosto che in alto:scrollTo.offset().top - container.offset().top + container.scrollTop() - (container.height()/2)
Mahn

7
element.scrollIntoView()- questo è tutto ciò che è richiesto. L'animazione è standardizzata. Vedi developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
WickyNilliams,

7
Nota che c'è un carattere "invisibile" alla fine del blocco di codice. Il personaggio è considerato non valido in Edge, Chrome. - un copy-paster
Attacco

114

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)

ciao @infensus puoi darmi un esempio funzionante di questa causa la mia non funziona? ho usato var section2 = $ ('# section-2'); $ ('html, body'). animate ({scrollTop: section2.offset (). top});
dll_onFire

Sembra a posto - sei sicuro che section2 esista? fare console.log (section2.length); e assicurati che non sia 0. Farò un esempio tra poco.
Dominic,

Perché $('html,body')? Ne ha bisogno solo in un contenitore specifico. La risposta accettata è migliore per me. Ho un caso simile alla domanda posta e la tua risposta non ha funzionato per me.
Petroff

2
@Petroff stranamente quando ho scritto questo non ho notato che l'elemento si trovava in un contenitore a scorrimento. Lascio la mia risposta così com'è perché le persone vengono qui da una ricerca su Google per scorrere il corpo a causa del titolo della domanda
Dominic

30

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

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

Per qualcosa che dovrebbe essere così assolutamente semplice, ho trascorso anni in altre soluzioni online, ma questa semplice fodera fa esattamente quello di cui ho bisogno.
Laurence Cope,

3
Va notato, in questo modo funziona per l'intera finestra. Se vuoi scorrere il contenuto che ha un overflow: scorri, questo non funzionerà.
Jeremy,

12

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

Il tuo riassunto di una riga, completo di animazione, era esattamente ciò di cui avevo bisogno. Grazie!
Scott Smith,

No need for any plugins?? Ma usi jQuery! È una libreria enorme, nemmeno un plugin.
Green,

1
Consiglio che non è necessario aggiungere un riferimento in aggiunta al riferimento alla libreria jquery. Inoltre jquery è una specie di standard industriale. Perché non dovresti usarlo? Probabilmente è abbastanza fattibile senza jquery, ma richiederebbe comunque a qualcuno di scrivere molto codice solo per la parte di analisi. Sembra controproducente. E mi è sembrato controproducente scrivere un plugin completo solo per scorrere fino a un div misero.
lorddarq,

4

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

Per esempio

row_5.scrollIntoView();

Come animarlo?
Green,

Non è necessario animare. Quando si utilizza scrollIntoView (), il controllo verrà automaticamente fatto scorrere per renderlo visualizzato nella vista.
Tamilarasi,


2

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.


2

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


1

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

@ AnriëtteMyburgh non sono sicuro che position () sia funzionale su tutti i browser. L'hai provato in altri per vedere se funziona? O posso vedere il codice che stai usando e vedere se c'è qualcos'altro che non va?
Nlinscott,

1

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

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

Riferimento .


6
scrollTo richiede due argomenti, ne hai scritto solo uno.
NuclearPeon,

2
... e si chiama sull'oggetto window.
Scambio hash

1

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.


0

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

0

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

        }
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.