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

Question

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 in realtà era la linea o meno che lo stava interrompendo 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 "px" dall'alto e non sembra fare la differenza.

Answer 1

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

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

Se stai cercando di scorrere senza intoppi potresti usare la funzione javascript di base setTimeout / setInterval per farlo scorrere con incrementi di 1px per un periodo di tempo prestabilito.

Answer 2

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

Answer 3

jQuery ora supporta scrollTop come variabile di animazione.

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

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

Answer 4

Per aggirare il problema html vs body , ho risolto il problema non animando direttamente i CSS ma piuttosto chiamando window.scrollTo (); su ogni passaggio:

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

Funziona bene senza aggiornamenti di aggiornamento in quanto 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.

Answer 5

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

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

Answer 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à il riempimento. 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');
}