Retour haut de la page avec Jquery Mobile

Je suis la construction d'un mobile webapp avec jquery mobile. Maintenant, je veux faire un back to top action.
Normalement, vous devriez le faire, comme le code ci-dessous.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Body ID For Top Anchor Demo</title>
</head>

<!-- NOTICE: ID in Body Tag. -->
<body id="top">

<h1>
This Is My Demo
</h1>

<p style="margin-bottom: 3000px ;">
This paragraph has a huge ass bottom margin
so that the page will definitely scoll and
put the following link below the page fold.
</p>

<p>
<!--
This link will jump back up to the ID:top in
the document. Since that is the ID of the body
tag, this link will jump to the top of the page.
-->
<a href="#top">Back To Top</a>
</p>

</body>
</html>

Mais le # est en jquery mobile utilisé pour relier des pages internes, de sorte que la méthode ci-dessus ne fonctionne pas. Quelqu'un sait comment le faire correctement?

Salutations.

InformationsquelleAutor Steaphann | 2012-03-20
  1. 11

    jQuery Mobile a son propre $.mobile.silentScroll() fonction qui permet de faire défiler to a particular Y position without triggering scroll event listeners. (http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html)

    Si vous souhaitez animer le défilement vous pouvez utiliser animate pour changer le scrollTop propriété de la mesure de défilement élément de la page (il est parfois <html> parfois, il est <body>).

    //delegate binding to only links that have the `.top` class
$(document).delegate('a.top', 'click', function () {
    $('html, body').stop().animate({ scrollTop : 0 }, 500);
    return false;
});

    Voici une démo à l'aide de $.mobile.silentScroll(): http://jsfiddle.net/XkjEE/2/

    Voici une démo à l'aide de .animate(): http://jsfiddle.net/XkjEE/1/

    Docs:

    Mise à jour

    Vous pouvez définir data-ajax="false" sur un lien ou un bouton de widget pour arrêter de jQuery Mobile de détourner le lien de clics et d'arrêter le comportement par défaut des liens.

    Faire de votre lien ressembler à quelque chose comme ceci:

    <a data-ajax="false" data-role="button" href="#top">TOP</a>

    Voici une démo: http://jsfiddle.net/XkjEE/

    InformationsquelleAutor Jasper
  2. 3

    Je cherchais quelque chose de semblable aujourd'hui et suis tombé sur ce qui pourrait fonctionner http://jsfiddle.net/b4M66

    Le bouton ne s'estompe une fois que vous commencez à faire défiler vers le bas de la page et disparaît une fois que vous retournez en haut de la page.

    jQuery:

    $(function() {
    $(window).scroll(function() {
        if($(this).scrollTop() != 0) {
            $('#toTop').fadeIn();    
        } else {
            $('#toTop').fadeOut();
        }
    });

    $('#toTop').click(function() {
        $('body,html').animate({scrollTop:0},800);
    });    
});​

    CSS:

    #toTop { position: fixed; bottom: 50px; right: 30px; width: 84px; background-color: #CCC; cursor: pointer; display: none; }​

    HTML:

    <div id="toTop">Back to Top</div>​
    InformationsquelleAutor Frasier013
  3. 1

    Vous pourriez tout simplement essayer ceci:

    window.scrollTo(0, 0);
    InformationsquelleAutor ghostCoder