如何使用javascript (无jQuery)动画滚动到页面顶部？

使用JavaScript（无jQuery）实现页面滚动到顶部的动画效果可以通过以下步骤实现：

1. 首先，需要获取当前滚动条的位置。可以使用window.pageYOffset属性获取当前页面的垂直滚动距离。
2. 创建一个函数，例如scrollToTop，用于处理滚动到页面顶部的逻辑。
3. 在scrollToTop函数中，使用window.scrollTo方法将滚动条的位置设置为(0, 0)，即页面顶部。该方法接受两个参数，分别是水平和垂直滚动距离。
4. 为了实现平滑的滚动效果，可以使用window.requestAnimationFrame方法来逐帧更新滚动位置。该方法接受一个回调函数作为参数，在每一帧中执行滚动操作。
5. 在回调函数中，首先计算滚动的距离，可以使用缓动函数（如easeInOutQuad）来实现平滑的滚动效果。然后使用window.scrollTo方法将滚动条的位置设置为计算得到的滚动距离。
6. 为了触发滚动效果，可以将scrollToTop函数绑定到一个按钮或其他触发事件的元素上，例如点击事件。

以下是一个示例代码：

function scrollToTop() {
  const scrollDuration = 500; // 滚动持续时间，单位为毫秒
  const scrollHeight = window.pageYOffset; // 当前滚动条位置

  function easeInOutQuad(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;
  }

  function scrollStep(timestamp) {
    const currentTime = Date.now();
    const timeDifference = currentTime - timestamp;
    const scrollY = easeInOutQuad(timeDifference, scrollHeight, -scrollHeight, scrollDuration);
    window.scrollTo(0, scrollY);

    if (timeDifference < scrollDuration) {
      window.requestAnimationFrame(scrollStep);
    }
  }

  window.requestAnimationFrame(scrollStep);
}

// 绑定到按钮的点击事件上
const button = document.getElementById('scrollToTopButton');
button.addEventListener('click', scrollToTop);

这段代码会在点击按钮时触发滚动到页面顶部的动画效果。你可以将scrollToTopButton替换为你页面中的按钮元素的ID。

推荐的腾讯云相关产品和产品介绍链接地址：

• 腾讯云云服务器（CVM）：提供弹性计算能力，满足不同规模业务需求。产品介绍
• 腾讯云云函数（SCF）：无需管理服务器即可运行代码的事件驱动计算服务。产品介绍
• 腾讯云对象存储（COS）：安全、稳定、低成本的云端存储服务。产品介绍
• 腾讯云人工智能（AI）：提供丰富的人工智能服务和解决方案，如图像识别、语音识别等。产品介绍
• 腾讯云物联网（IoT）：为物联网设备提供连接、通信、控制和管理的云端服务。产品介绍
• 腾讯云区块链（BCS）：提供一站式区块链服务，帮助企业快速搭建和部署区块链网络。产品介绍
• 腾讯云视频处理（VOD）：提供视频上传、转码、截图、水印等处理能力，满足视频处理需求。产品介绍
• 腾讯云音视频通信（TRTC）：提供高品质、低延迟的实时音视频通信能力。产品介绍
• 腾讯云数据库（TencentDB）：提供多种类型的数据库服务，如云数据库 MySQL、云数据库 PostgreSQL 等。产品介绍
• 腾讯云云原生应用引擎（TKE）：为容器化应用提供高效、安全、可靠的托管服务。产品介绍

请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求进行评估。