返回到移动网站在Android上不起作用顶部链接 [英] Back to top link on mobile site doesn't work on android
问题描述
我有一个有趣的问题。我建立对移动设备面向网站（请不，这不是对移动Web应用程序的问题，这是一个普通的HTML / CSS / JavaScript的网站）。
我们要实现一个返回顶部链接中的所有页面的页脚，所以它更容易导航回到顶端上的小屏幕设备上。
I have an interesting question. I'm building a web site geared towards mobile devices (please not this is not a question regarding mobile web apps, it's a plain HTML / CSS / javascript website). We need to implement a "Back to top" link in the footer of all pages, so it's easier to navigate back to the top on devices with small screens.
我现在就显示code，只是想提这工作完全在iPhone / iPod touch的设备，甚至我的FF，Safari和Chrome桌面浏览器。但是，在Android上它只是不想要工作。
I'll show the code now, just wanted to mention this works perfectly on iphone/ipod touch devices, and even my FF, safari and chrome desktop browsers. But on android it just doesn't want to work.
步骤来重现我的Android设备上的错误：
- 向下滚动到页面底部。
- 点击回到顶部链接。
- 页面滚动起来很好，但随后闪烁，滚动回落到页面底部再次
Steps to reproduce the error on my android device: - Scroll down to the bottom of the page. - Click on the back to top link. -- The page scrolls up nicely but then flickers and scrolls back down to the bottom of the page again.
有几乎看起来滚动事件不会在后台停止，并且一旦scrollto功能完成后，它再次恢复滚动至底部。我的code被认为能杀死任何当前正在运行的动画，我希望应该解决这个问题。但事实并非如此。
It almost looks like the scrolling event doesn't stop in the background, and once the scrollto function is done, it resumes the scrolling to bottom again. My code is supposed to kill any current running animations, which I was hoping should fix this. But it doesn't.
下面是我的code：
$(document).ready(function() {
$('a.linktop').click(function() {
$('body,html').stop(true, true).animate({
scrollTop: 0
},
250);
return false;
});
});
任何帮助将大大AP preciated。
Any help would be greatly appreciated.
推荐答案
我试过很多不同的解决方案，包括一个以上的建议，这是优雅的除了在姜饼不工作，并要求JQ移动。
I tried lots of different solutions including the one suggested above, which is elegant except does not work on gingerbread and requires jQ mobile.
以下code适用于iPhone和Android 2.2+包括姜饼以及定期的浏览器，它仅需要定期JQ。我发现code。在此链接使用jQuery插件，滚动，以避免＃在网址
修改后用于下面的例子，这是我的iPhone 4S，银河II和较旧的Android设备进行测试。
The following code works on iPhone, Android 2.2+ including gingerbread as well as regular browsers and it only requires regular jQ. I found the code at this link Use jQuery scroll plugin to avoid # on url and modified for the example below, which I tested on iPhone 4s, Galaxy II and an older Android device.
<!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>
这篇关于返回到移动网站在Android上不起作用顶部链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
