Come scorrere la finestra utilizzando la funzione JQuery $ .scrollTo ()

98

Sto cercando di scorrere verso il basso di 100 px ogni volta che l'utente si avvicina alla parte superiore del documento.

Ho la funzione in esecuzione quando l'utente si avvicina all'inizio del documento, ma la funzione .scrollTo non funziona.

Ho messo un avviso dopo e prima per verificare se era effettivamente la linea o meno che lo stava fermando e solo il primo avviso si spegne, ecco il codice:

alert("starting");
$.scrollTo({ top: '+=100px', left: '+=0px' }, 800);
alert("finished");

So di avere la pagina jquery collegata correttamente perché sto usando molte altre funzioni jquery e funzionano tutte bene. Ho anche provato a rimuovere il "px" dall'alto e non sembra fare la differenza.

3

Jquery stesso funziona bene, ma sei sicuro di avere il plugin scrollTo collegato correttamente? Cambia uno di questi avvisi in alert ($. ScrollTo);

— Andrew

97

Se non funziona, perché non provi a utilizzare il metodo scrollTop di jQuery?

$("#id").scrollTop($("#id").scrollTop() + 100);

Se stai cercando di scorrere in modo fluido, puoi utilizzare la funzione javascript setTimeout / setInterval di base per farlo scorrere con incrementi di 1 px su un periodo di tempo impostato.

— Fermin
fonte

8

Nota se vuoi scorrere l'intera pagina e non il singolo elemento, usa $ ('html, body') proprio come Tim ha indicato qui. Solo $ ('body') non funzionerà in tutti i browser.

— i--

321

$('html, body').animate({scrollTop: $("#page").offset().top}, 2000);

— Mihai
fonte

19

Mi sono spesso chiesto perché le persone usano "html, body" per scrollTop invece di "html". Qualche idea su questo?

— Scott Greenfield,

+1 ha funzionato per me;) Sono anche interessato a sapere perché html, bodyinvece di solo html?

— Kato

9

@ScottGreenfield, @Kato: non sono sicuro del perché, ma questo commento dice che non includendo bodyinterrompe questo su Chrome 4: stackoverflow.com/questions/1890995/…

— Yuji 'Tomita' Tomita

scrollTop: 0funziona anche bene. Ma la durata diminuisce. Funziona bene se impostato 1000 in velocità

— shashwat

Questa è una buona soluzione fino a quando non si desidera aggiungere un metodo completo: verrà eseguito due volte. La soluzione di @complistic è più elegante e lo eviterà.

— plankguy

41

jQuery ora supporta scrollTop come variabile di animazione.

$("#id").animate({"scrollTop": $("#id").scrollTop() + 100});

Non è più necessario impostare setTimeout / setInterval per scorrere senza problemi.

— Todd
fonte

Hai alcuni errori di sintassi - manca la tua chiusura {. Altrimenti questo è un buon punto.

— Joshua

1

Dovrebbe essere $("#id").offset().topinvece?

— codeulike

15

Per aggirare il problema htmlvs body, ho risolto questo problema non animando direttamente il css ma piuttosto chiamando window.scrollTo();ad ogni passaggio:

$({myScrollTop:window.pageYOffset}).animate({myScrollTop:300}, {
  duration: 600,
  easing: 'swing',
  step: function(val) {
    window.scrollTo(0, val);
  }
});

Funziona bene senza alcun problema di aggiornamento poiché utilizza JavaScript cross-browser.

Dai un'occhiata a http://james.padolsey.com/javascript/fun-with-jquerys-animate/ per maggiori informazioni su cosa puoi fare con la funzione animata di jQuery.

— complistico
fonte

1

È brillante. Sono passato solo window.pageYOffseta $(window).scrollTop()e window.scrollTo(0, val)in $(window).scrollTop(val)quindi non devo preoccuparmi della compatibilità del browser.

— leftclickben

1

Non ho mai pensato di passare un oggetto al metodo animato di jQuery in questo modo. Tanti possibili utilizzi. Questa soluzione è ottima, grazie.

— Synexis

Sì, la tecnica è un contributo significativo. In precedenza risolvevo i problemi del browser utilizzando direttamente "window.scrollTo ()", ma ciò non consente una richiamata "completa", né una promessa. Grazie @complistic per questa soluzione. Inoltre, i miei ringraziamenti a @leftclickben; Ho implementato la sua variazione usando ".scrollTop ()". Inoltre, l'articolo "james.padolsey", per collegamento, è una lettura concisa e molto utile.

— IAM_AL_X

Penso che "window.scrollTo ()" dovrebbe essere compatibile con tutti i browser moderni.

— IAM_AL_X

7

Sembra che tu abbia la sintassi leggermente sbagliata ... Presumo in base al tuo codice che tu stia cercando di scorrere verso il basso di 100 px in 800 ms, in tal caso funziona (usando scrollTo 1.4.1):

$.scrollTo('+=100px', 800, { axis:'y' });

— Alconja
fonte

6

In realtà qualcosa di simile

function scrollTo(prop){
    $('html,body').animate({scrollTop: $("#"+prop).offset().top +
 parseInt($("#"+prop).css('padding-top'),10) },'slow');
}

funzionerà bene e supporterà l'imbottitura. Puoi anche supportare facilmente i margini - per il completamento vedi sotto

function scrollTo(prop){
    $('html,body').animate({scrollTop: $("#"+prop).offset().top 
+ parseInt($("#"+prop).css('padding-top'),10) 
+ parseInt($("#"+prop).css('margin-top'),10) +},'slow');
}

— Tim
fonte