编辑:我找到了一个 jQuery 解决方案! https://codepen.io/chriscoyier/pen/dpBMVP 这个确实适用于 iOS。我想 jQuery 桥接浏览器支持问题的日子还没有结束。
当然，在搜索了许多小时并最终发布到 Stack Overflow 之后，我在几分钟后找到了解决方案。我看到其他一些人在评论中提出了一些建议——我也会检查一下。然而，上面 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);
最佳答案
这是一个使用 jQuery 的 animate 的简单示例，正如@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>关于css - iOS 解决方法 : Smooth scrolling without the CSS property Scroll Behavior: Smooth?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59814404/