Question

我正在添加一个固定在浏览器窗口底部的返回顶部按钮。单击时，它会在桌面和Android中滚动到顶部，但不会在iPhone上滚动到顶部。在iPhone上，scrollTo事件显示地址栏和底部移动按钮栏，但不会将用户返回到页面顶部。

编辑：当触摸事件发生在屏幕底部20-30px内时，iPhone上会显示地址栏和按钮栏。这就是为什么这个返回顶部按钮不起作用。向上移动40px会阻止地址/按钮栏出现。

我试图将它原始放置：

$('#scroll-to-top-button').on('click', function() {
    window.scrollTo(0,0);
});

并带有计时器：

$('#scroll-to-top-button').on('click', function() {
    window.setTimeout(function() {
        window.scrollTo(0,0);
    }, 500);
});

我尝试使用scrollTop，结果相同：显示浏览器按钮栏和地址栏，但没有滚动。

我也试过启动scrollTo，同时用另一个scrollTo设置timeOut。超时永远不会触发。

我也尝试滚动html或body，或两者的组合：

$('#scroll-to-top-button').on('click', function() {
    $('html,body').animate({
        scrollTop: 0,
    }, 200);
});

仅限html

$('#scroll-to-top-button').on('click', function() {
    $('body').animate({
        scrollTop: 0,
    }, 200);
});

只有身体

$('#scroll-to-top-button').on('click', function() {
    $('html').animate({
        scrollTop: 0,
    }, 200);
});

我已尝试将按钮重置为锚标记并尝试将其链接到页面内。这不仅适用于基本的html锚点功能：

<div id="main-body"> ... lots of content forcing scrollbars to appear ... </div>

<a id="scroll-to-top-button" class="btn btn-default" href="#main-body">Back to Top</a>

尝试阻止默认设置并设置锚点链接的动画：

$('#scroll-to-top-button').on('click', function(e) {
    e.preventDefault();
    $('html,body').animate({
        scrollTop: 0,
    }, 200);
});

这是一个展示问题的链接。在这个链接中，代码正在使用我最后一个例子，这个问题纯粹是一个试图链接到页面顶部的锚标记。

http://willanni.com/dev/iphone-scroll/

我认为可能缺少视口标记可能导致它，所以我添加了以下内容：<meta name="viewport" content="width=device-width, initial-scale=1">。然而。当我添加它时，它仍然无法正常工作。

除了强制地址栏和按钮栏在iPhone中始终可见外，有没有办法让它滚动到iPhone的窗口顶部？（注意：iPad没有这个问题，虽然它有一个不同的奇怪问题需要超时修复。虽然不同的故事）

Answer 1

尝试在body和html上使用jQuery animate：

$("BODY,HTML").animate({
    scrollTop: 0
}, 100); 
// second parameter is time so adjust it if you please

Answer 2

答案是，如果不强制地址/按钮栏始终可见，就没有办法做到这一点。

iPhone可以捕获屏幕底部约20-30px内的任何触摸事件，并显示地址和底部按钮栏。在显示栏之前，不会触发或注册任何页面脚本，按钮或链接。然后在第二次触摸之前无法激活position: fixed, bottom: 0;按钮：

首先触摸显示底部按钮栏（和地址栏）
第二次触摸激活任何按钮/脚本/锚点功能

在隐藏按钮栏时，向窗口添加事件侦听器不会捕获屏幕该区域中的触摸事件。例如，为了测试我设置超时以允许自己一点时间向下滚动并隐藏底栏。除了底部之外，屏幕的所有区域都有效：

window.addEventListener('touchstart', function() {
    setTimeout(function() {
        alert('touchstart');
    }, 500);
});

在那个底部区域，没什么。

因此，实际上，要在第一次单击时将一个按钮附加到屏幕底部，您需要将一些hacky css应用于body和html标签以强制始终显示地址和按钮栏：

html,body {
    -webkit-overflow-scrolling: touch !important;
    overflow: auto !important;
    height: 100% !important;
}

iPhone主播，scrollTop，scrollTo显示移动按钮栏，但不会滚动或跳转到锚点

2 个答案: