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

Question

Sto provando a 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 alla parte superiore del documento, ma la funzione .scrollTo non funziona.

ho messo un avviso dopo e prima di controllare per vedere se effettivamente era la linea o no che stava fermando e solo la prima segnalazione si spegne, ecco il codice:

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

so di avere la pagina jquery è stata 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.

Answer 1

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

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

Se stai cercando di scorrere senza intoppi è possibile utilizzare di base JavaScript setTimeout/setInterval funzione per rendere scorrevole in incrementi di 1px su una lunghezza di tempo.

Answer 2

Sembra che tu abbia la sintassi leggermente errata ... Sto assumendo in base al tuo codice che stai provando a scorrere verso il basso 100px in 800ms, in questo caso funziona (usando scrollTo 1.4.1):

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

Answer 3

jQuery ora supporta scrollTop come variabile di animazione.

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

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

Answer 4

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

Answer 5

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 il supporto imbottitura. È inoltre possibile sostenere i margini facilmente - 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'); 
} 

Answer 6

per aggirare il problema html vs body, ho fissato questo non animando il css direttamente, ma piuttosto chiamare window.scrollTo(); su ogni passo:

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

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

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