1

我有一个有趣的问题。我正在构建一个面向移动设备的网站（请注意，这不是关于移动网络应用程序的问题，它是一个纯 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;
  });
 });

任何帮助将不胜感激。

4

3 回答 3

1

我尝试了许多不同的解决方案，包括上面建议的一个，它很优雅，除了不适用于姜饼并且需要 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>
于 2012-06-09T15:30:47.950 回答
1

我用了

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

对于一个 jQuery Mobile back to top 插件，它可以在 Android 上运行而没有你遇到的问题。

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

于 2012-05-14T19:49:39.527 回答
0

我在使用“返回顶部”按钮时遇到了同样的问题，在尝试了一些 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/

于 2015-08-26T18:19:52.840 回答