Question

我需要以动画的方式将页面加载到页面上的某个位置。它工作正常（使用jQuery的动画）：

$(document).ready(function () {
    $('html, body').animate({
        scrollTop: $('#today').offset().top - 50
    }, 800, "linear");
});

但是，有一件事并不顺利。特别是在移动设备上，它感觉非常生涩。

我见过一些CSS动画（使用transition和transform）非常流畅，但无法弄清楚如何将其应用于页面滚动。是否可以使用CSS做我想做的事情？

Answer 1

尝试设置以下css：

<style type="text/css">
    html {
      scroll-behavior: smooth !important;
    }
</style>

您也可以尝试使用vanilla JavaScript而不是jQuery：

function showIt(el_id) {
    var el = document.getElementById(el_id);
    el.scrollIntoView(true, {behavior: "smooth"});
}
showIt('today')

还可以考虑在页面中间添加一个itermediary元素，例如：

<div id="middle" style="display: none;"></div>

function showIt(el_id) {
    var middle_el = document.getElementById('middle');
    var el = document.getElementById(el_id);
    middle_el.scrollIntoView(true, {behavior: "instant"});  // Go to middle directly and then scroll slowly to #today.
    el.scrollIntoView(true, {behavior: "smooth"});
}
showIt('today')

有关scrollIntoView的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

如果你在iOS上，你可能会感兴趣：Scrolling slow on mobile/ios when using overflow:Scroll

Answer 2

我发现跨浏览器/跨设备体面流畅scrollTop的最佳解决方案是使用velocity.js。它比jQuery的动画更快，更轻，支持多种语法，其中一种是jQuery.animate()使用的语法，所以你需要做的就是用.animate()取代.velocity() easeOutCubic（然后加载东西）。

我知道可能还有其他解决方案，但是这个解决方案多年来一直很稳定，他们始终保持最新状态，我说它是任何严肃的前端Web开发人员的守护者＆＃ 39; s工具。你会在速度libscore page上找到一些非常奇特的名字。不，我没有隶属关系。我很感激能够免费使用它。

Answer 3

尝试使用$(document).ready(function () { $('html, body').animate({ scrollTop: $('#today').offset().top - 50 }, 800, "easeOutCubic"); });或其他缓动功能（choose one here）：

$maxRetries = 5
$retryWaitSeconds = 60
Get-Content $shaFile | Foreach-Object { ($_ -split " ", 2)[0] } |
        Where-Object { ($adfs.$v.iniFile,$shaFile -NotContains $_) -and (Is-Match $_) } | Foreach-Object {
            do {
                $file = Download-File $w $_ $dir
                #force the file download to fail 3 times for testing
                foreach ($i in 1..3) {
                    $file = $null
                }

                #sleep if the file download failed.
                if ($file -eq $null) {
                    start-sleep $retryWaitSeconds
                }
            }
            while (($file -eq $null) -and ($retryCount -le $maxRetries)) #limit the maximum number of retries in case download will never succeed.
        }

如何顺利滚动页面？

3 个答案: