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

iPhone anchor, scrollTop, scrollTo reveals mobile button bar, but does not scroll or jump up to anchor

本文关键字：滚动 scrollTo scrollTop 锚点 显示 移动 iPhone 按钮      更新时间：2024-06-07

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

编辑：当触摸事件发生在屏幕底部20-30像素范围内时，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/

我想可能是缺少viewport标记导致了这种情况，所以我添加了以下内容：<meta name="viewport" content="width=device-width, initial-scale=1">。然而当我把它加进去的时候，它仍然不能使它工作。

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

尝试在body和html:上使用jQuery动画

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

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

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

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

当按钮栏被隐藏时，在窗口中添加事件监听器不会捕捉到屏幕该区域的触摸事件。例如，为了测试，我设置了一个超时，让自己有一点时间向下滚动并隐藏底部栏。在屏幕的所有区域，除了底部，这是有效的：

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

在底部区域，什么都没有。

因此，实际上，要想在第一次点击时在屏幕底部添加一个按钮，你需要在正文和html标签上应用一些技巧性的css，以强制地址和按钮栏始终显示：

html,body {
    -webkit-overflow-scrolling: touch !important;
    overflow: auto !important;
    height: 100% !important;
}
相关文章：