jQuery che anima la parte superiore fino a 0 non funziona su Windows Phone

Question

Ho scritto un sito Web che ha una funzione che fa scorrere la visualizzazione degli utenti nella parte superiore della pagina. La chiamata in questione è:

$('html,body').animate({scrollTop:0}, 150, 'swing'); 

Questo funziona bene su tutti i browser desktop, ma su Windows Phone, scorre solo l'utente su circa 180 pixel, poi si ferma. Ho provato a sostituire la funzione con:

$('html,body').scrollTop(0); 

E scatta verso l'alto su desktop, ma scorre verso l'alto al telefono. Credo che questa esigenza di Internet Explorer Mobile tenti di animare senza problemi lo scorrimento e causa il problema. Se questo è il caso (o se no, qualcuno potrebbe correggermi), come posso sovrascrivere questa funzione per far funzionare l'animazione?

EDIT

Anche se la sua, sembra di lavorare in una capacità limitata, ho sostituito il codice non è l'ideale scorrimento con questo:

$('html,body').animate({scrollTop:0}, 150, 'swing', function() { 
    $('html,body').scrollTop(0); 
}); 

Ma sarebbe bene sapere se c'è un'opzione per disabilitare lo scorrimento regolare in Mobile IE in modo programmatico.

Answer 1

su Windows Phone 8, sono in esecuzione nello stesso problema. Attualmente sto facendo il seguente hack, dove attende che l'animazione sia "completa" e poi esegue uno window.scrollTo standard per assicurarci che venga fatto scorrere nella posizione corretta.

scrollHmtlBody: function (scrollToTarget, duration) { 
    $('html, body').animate({ scrollTop: scrollToTarget }, duration); 

    // Windows Phone doesn't animate properly, 
    // this makes sure it scrolls to the appropriate position (eventually) 
    setTimeout(function() { 
     window.scrollTo(0, scrollToTarget); 
    }, duration + 75); 
} 

io non sono contento del risultato - funziona, ma a causa delle 75ms ritardare ha un'esitazione prima si "finiture" l'animazione di scorrimento. Con meno di un ritardo, Windows Phone apparentemente si rifiuta di eseguire l'azione scrollTo (forse pensa che stia attualmente "scorrendo"?)

Posso finire per ricorrere a una clausola if/else con rilevamento dispositivo, ma in questo momento Sto cercando di trovare una soluzione migliore piuttosto che percorrere quella strada.

Answer 2

ho risolto in questo modo

Il link: < a href = "# di" data-target = "di" class = "scroll-to" > proposito </a >

Il nome ancoraggio #about lo fa funzionare su dispositivi con scorrimento continuo

 function scrollToElement(elementId) { 
      var top = $("#" + elementId).offset().top; 
      $('html,body').animate({ scrollTop: top }, 250); 
     } 

     $(".scroll-to").click(function() { 
      scrollToElement($(this).data("target")); 
     }); 

Answer 3

Nessuna di queste soluzioni ha funzionato per me sia su Windows Phone 7. che cosa ha fatto il lavoro è stato quello di rimuovere animate() e affidarsi semplicemente a scrollTop sul tag html. Spero che questo aiuti qualcuno.

questo:

$('html').scrollTop(distance); 

invece di:

$('html,body').animate({ scrollTop: distance }, 250); 

Answer 4

Ho avuto lo stesso problema sul mio Windows Phone 8. Nel mio caso, avevo bisogno di scorrere la finestra verso il basso ma sul telefono non funzionava.

Alla fine ho utilizzato una combinazione di soluzioni @topherg e @LocalPCGuy con una leggera variazione per portare lo schermo verso il basso.

Ecco il mio codice in caso aiuta qualcun altro:

$("html, body").stop().animate({ 
    scrollTop: $("#last-message").offset().top 
}, 2000, 'swing', function() { 
    $("html, body").scrollTop($("#last-message").offset().top); 
}); 

setTimeout(function() { 
    window.scrollTo(0, document.body.scrollHeight); 
}, 2075); 

Dove # ultimo messaggio è il div che voglio scorrere fino a. Sembra un po 'hacky, ma anche Windows Phone: P