很多网站因为显示的内容比较多，导致滚动条从底部拉回到顶部需要拉很长，所以很多网站都会有一个滚动到顶部的功能，那这种回到顶部的功能是如何实现的呢？今天我们分享一段js将窗口滚动到顶部的功能。

实例代码：

// 堆代码 duidaima.com
// 声明 scrollTopH 变量用于存储当前页面滚动位置
let scrollTopH = { value: window.pageYOffset 
                    || document.documentElement.scrollTop 
                    || document.body.scrollTop };
const bindTop = () => {
  // 方法1：可以将窗口滚动到顶部，但效果不太好
  window.scrollTo(0, 0);

  // 将文档元素（即整个页面）的scrollTop属性设置为0，也可以实现将页面滚动到顶部的效果
  document.documentElement.scrollTop = 0;

  // 方法2：通过定时器逐步滚动到顶部，实现更平滑的视觉效果
  // 使用setInterval创建一个定时器，每10毫秒执行一次回调函数
  const timeTop = setInterval(() => {
    // 控制滑动的距离，每次将scrollTop属性减少50
    scrollTopH.value -= 50;
    document.documentElement.scrollTop = scrollTopH.value;

    // 当scrollTop属性的值小于等于0时，说明已经滑动到页面顶部
    if (scrollTopH.value <= 0) {
      // 清除定时器，避免定时器一直运行造成问题
      clearInterval(timeTop);
    }
  }, 10);
};

这段代码定义了一个名为bindTop的函数，其主要功能是滚动页面到顶部。该函数包含两种方法，一种是直接将窗口滚动到顶部，另一种是通过一个定时器逐步滚动到顶部，以达到更平滑的视觉效果。具体来说，函数的第一部分使用了两种方法将滚动条位置设置为0，以确保页面在顶部。window.scrollTo(0, 0)用于将窗口滚动到顶部，document.documentElement.scrollTop = 0用于设置文档元素（即整个页面）的scrollTop属性为0。

函数的第二部分使用了一个名为timeTop的定时器，通过逐步减小文档元素的scrollTop属性的值来实现平滑滚动。具体来说，每10毫秒将scrollTop属性的值减少50，直到它小于等于0。一旦到达顶部，定时器将被清除。要注意的是，scrollTopH是一个可能在函数之外定义的变量，其中存储了滚动条的位置。函数不负责初始化此变量，而是假定它已经存在并包含当前滚动条的位置。

最后，要注意在方法2中定时器的清除(*)，如果不清除定时器，它会一直运行，直到页面被卸载或刷新。因此，在滚动到顶部后，必须清除定时器以避免出现问题。