1

興味深い質問があります。モバイル デバイス向けの Web サイトを構築しています (これはモバイル Web アプリに関する質問ではありません。プレーンな HTML / CSS / JavaScript Web サイトです)。すべてのページのフッターに「トップに戻る」リンクを実装する必要があります。これにより、小さな画面のデバイスでトップに簡単に戻ることができます。

ここでコードを示しますが、これは iphone/iPod touch デバイス、さらには私の FF、サファリ、クローム デスクトップ ブラウザでさえも完全に動作することを述べたいと思います。しかし、Androidでは動作したくありません。

Android デバイスでエラーを再現する手順: - ページの一番下までスクロールします。- トップに戻るリンクをクリックします。-- ページはうまくスクロールしますが、ちらつき、再びページの一番下までスクロールします。

スクロール イベントがバックグラウンドで停止しないように見えます。scrollto 関数が完了すると、再び下へのスクロールが再開されます。私のコードは、現在実行中のアニメーションを強制終了することになっていますが、これを修正することを望んでいました。しかし、そうではありません。

これが私のコードです：

 $(document).ready(function() {
  $('a.linktop').click(function() {
    $('body,html').stop(true, true).animate({
        scrollTop: 0
    },
    250);
    return false;
  });
 });

どんな助けでも大歓迎です。

4

3 に答える 3

1

使用しました

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

jQuery Mobileのトッププラグインに戻ると、Androidで問題なく動作しました。

ここでコードをチェックしてくださいhttp://operationmobile.com/jquery-mobile-ux-add-a-back-to-top-button/

于 2012-05-14T19:49:39.527 に答える
1

上記の提案を含むさまざまなソリューションを試しました。これは、ジンジャーブレッドでは機能せず、jQ モバイルが必要であることを除けばエレガントです。

次のコードは、iPhone、ジンジャーブレッドを含む Android 2.2+、および通常のブラウザーで動作し、通常の jQ のみを必要とします。このリンクでコードを見つけました Use jQuery scroll plugin to avoid # on url を以下の例に合わせて変更し、iPhone 4s、Galaxy II、および古い Android デバイスでテストしました。

<!DOCTYPE html>
<html>
<head>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.js'></script>

  <script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){
    $('.2top').click(function() {
            $('html, body').animate({ scrollTop: $('#top').offset().top }, 'slow');
        return false;
            });
    });//]]>  

  </script>

</head>
<body>
  <div id="top">go to the  bottom of this page</div>

  <p style="height:2200px">dddddd...</p>

  <a href="#" class="2top">back to top</a>

</body>
</html>
于 2012-06-09T15:30:47.950 に答える