2017-04-06 1 views
1

Je navigue de la page 1 à la page 2 sur mon site jQuery Mobile en utilisant la méthode $.mobile.changePage(). Les pages 1 et 2 sont plus grandes que l'écran, bien que la page 1 soit beaucoup plus longue que la liste longue. Lorsque l'utilisateur appuie sur un élément, je charge le contenu de la page 2 via ajax, ajoute ce contenu au corps, puis passe à la page 2 en utilisant changePage(). Si l'utilisateur fait défiler la liste à la page 1, puis passe à la page 2, la fenêtre fait défiler une quantité variable à la page 2. J'ajouterais que la distance défilée à la page 2 semble être liée à la distance L'utilisateur a précédemment fait défiler la page 1.jQuery Mobile: la page défile après la transition

J'ai essayé d'utiliser $.mobile.silentScroll(0); et $('body').scrollTop('0'); mais je n'ai eu aucun succès.

Comment puis-je aller sur la prévention de la méthode de la page de changement de défilement vers le bas de la page 2

Répondre

1

Je l'ai rencontré ce même problème auparavant. Ce que vous pouvez faire est de créer un gestionnaire d'événements qui est invoquée chaque fois qu'il ya un changement de page et avoir ce défilement de fonction en haut de la page:

$.mobile.pageContainer.on("pagecontainerchange", function(event, ui) { 
    $(document).scrollTop(0); 
}); 

La différence clé ici est d'effectuer la .scrollTop() sur le document au lieu de le body.

Dans mon code, j'ai rendu ce petit exemple un peu plus sophistiqué. J'enregistre la position de défilement vertical de chaque page, la stocke sur l'élément DOM de la page et restaure la position de défilement vertical lorsque l'utilisateur revient à la page. De cette façon, l'utilisateur est toujours renvoyé à l'endroit où il s'était arrêté au lieu de toujours faire défiler vers le haut de la page.