如何在Javascript中同时平滑地滚动X和Y

在JavaScript中同时平滑地滚动X和Y轴可以通过多种方法实现，其中一种常见的方法是使用window.scrollTo函数结合requestAnimationFrame来实现平滑滚动效果。以下是一个示例代码：

基础概念

平滑滚动：指页面在滚动时不是瞬间跳转到目标位置，而是逐渐过渡到目标位置，给用户一种流畅的感觉。
X轴滚动：水平方向的滚动。
Y轴滚动：垂直方向的滚动。

类型

线性滚动：匀速滚动。
缓动滚动：速度随时间变化，常见的缓动函数有ease-in, ease-out等。

应用场景

页面导航：点击菜单项时平滑滚动到对应的页面部分。
无限滚动：在社交媒体或新闻网站中，当用户滚动到页面底部时，自动加载更多内容并平滑滚动。
引导页面：在产品介绍或引导页面中，通过平滑滚动展示不同部分。

示例代码

以下是一个使用requestAnimationFrame实现平滑滚动的示例：

function smoothScrollTo(x, y, duration) {
    const startX = window.scrollX;
    const startY = window.scrollY;
    const distanceX = x - startX;
    const distanceY = y - startY;
    let startTime = null;

    function animation(currentTime) {
        if (startTime === null) startTime = currentTime;
        const timeElapsed = currentTime - startTime;
        const run = ease(timeElapsed, startX, distanceX, duration);
        const rise = ease(timeElapsed, startY, distanceY, duration);
        window.scrollTo(run, rise);
        if (timeElapsed < duration) requestAnimationFrame(animation);
    }

    function ease(t, b, c, d) {
        t /= d / 2;
        if (t < 1) return c / 2 * t * t + b;
        t--;
        return -c / 2 * (t * (t - 2) - 1) + b;
    }

    requestAnimationFrame(animation);
}

// 使用示例
smoothScrollTo(500, 300, 1000); // 滚动到X=500, Y=300的位置，持续时间为1000毫秒