iOS 解决方法：在没有 CSS 属性的情况下平滑滚动 滚动行为：平滑？

Question

编辑：我找到了一个 jQuery 解决方案！ https://codepen.io/chriscoyier/pen/dpBMVP 这确实适用于iOS。我猜想 jQuery 桥接浏览器支持问题的日子还没有结束。

当然，经过几个小时的搜索，最后发布到 Stack Overflow，我在几分钟后找到了解决方案。我看到其他一些人在 cmets 中提出了一些建议——我也会检查一下。然而，上面 Codepen 中的这个 jQuery 解决方案可以解决问题，并允许轻松自定义滚动速度来启动！

----------------原始问题-----------------------

您可能已经注意到 iOS Safari 或 iOS Chrome 都不支持 CSS 属性 Scroll Behavior: Smooth。我的问题是：是否有另一种 javascript 方法可以将滚动动画到页面上不依赖此 CSS 属性的特定位置？也许滚动少量然后重复此行为直到击中所需目标的东西？我尝试了以下方法，但出现“超出最大调用大小错误”：

function scrollExperiment() {
    const finalPosition = 500
    let i = 0
    if (i < finalPosition) {
        window.scrollTo(0, 1);
        i++
        setTimeout(scrollExperiment(), 10)
    }
} scrollExperiment()

有没有人成功构建过这样的解决方法？我觉得应该有一个不依赖属性 Scroll Behavior: Smooth 的 jQuery 解决方案，但我还没有找到。我尝试了以下方法，但在 iOS 上仍然无法流畅滚动：

$(window).scrollTop($("#anchor").offset().top); 

Answer 1

这是一个使用 jQuery 的 animate 的快速示例，正如 cmets 中的 @volt 建议的那样：

$("html, body").animate({ scrollTop: "500px" });

body {
  background: #eee;
  padding: 20px;
  font-family: Helvetica;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>  
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>  
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>    
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>  
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>  
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>
  <p>text goes here text goes here</p>    
</div>

jsFiddle