Question

我有一个有趣的问题。我正在建立一个面向移动设备的网站（请不要这不是关于移动网络应用程序的问题，它是一个简单的HTML / CSS / javascript网站）。我们需要在所有页面的页脚中实现“返回顶部”链接，因此在具有小屏幕的设备上导航回到顶部更容易。

我现在将展示代码，只是想在iphone / ipod触控设备，甚至我的FF，safari和chrome桌面浏览器上完美地运行。但是在Android上它只是不想工作。

在我的Android设备上重现错误的步骤： - 向下滚动到页面底部。 - 单击返回顶部链接。 - 页面滚动得很好但随后闪烁并再次向下滚动到页面底部。

几乎看起来滚动事件不会在后台停止，一旦完成scrollto功能，它就会再次滚动到底部。我的代码应该杀死当前正在运行的动画，我希望能解决这个问题。但事实并非如此。

这是我的代码：

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

非常感谢任何帮助。

Answer 1

我用过

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

用于jQuery Mobile的回页首插件，它可以在Android上运行而不会出现问题。

查看此处的代码http://operationmobile.com/jquery-mobile-ux-add-a-back-to-top-button/

Answer 2

我尝试了很多不同的解决方案，包括上面建议的解决方案，除了不适用于姜饼并且需要jQ mobile之外，它是优雅的。

以下代码适用于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>

Answer 3

我在使用“返回顶部”按钮时遇到了同样的问题，在尝试了一些jquery替代品后，我发现这个简单的html选项适用于“旧浏览器”，但它也适用于移动设备。似乎我们忘记了#top工作的原因：

<body>
    <a id="top"></a>  
    <!-- content goes here -->
    <a href="#top">Back to top</a>
</body>

另一种方法是使用现有的id：

<body>
    <div id="wrapper">
    <!-- content goes here -->
    <a href="#wrapper">back to top</a>
    </div>
</body>

源： http://www.smashingmagazine.com/2008/11/short-story-about-top-links/

回到顶部移动网站上的链接不适用于Android

3 个答案: