迹忆客 专注技术分享

为长网页提供 UI 元素以让用户滚动到页面顶部 JavaScript 至关重要。在本教程中，你将找到几种滚动到顶部的 JavaScript 方法。

我们将使用原生 JavaScript scrollTo 方法。我们还将展示如何使用 jQuery scrollTop() 方法和 scrollTop 属性滚动到顶部（请阅读以了解使用 jQuery 的好处）。

我们还将提供额外的技巧：一个巧妙的单行纯 HTML 快捷方式和一个自定义 vanilla JS 动画来滚动到页面顶部。

在 JavaScript 中使用 Vanilla JS window.scrollTo() 方法滚动到页面顶部

你可以使用 vanilla JS window.scrollTo() 方法滚动到 JavaScript 中的页面顶部。使用 window.scrollTo() 方法，我们可以滚动到文档中任何指定的 x 和 y 坐标集。

此方法的旧形式如下所示：

window.scrollTo(x - coordinate, y - coordinate);

我们可以通过传入 (0,0) 作为坐标参数来使用它滚动到 JavaScript 中的页面顶部。

let scrollTopBtn = document.getElementById('top');
scrollTopBtn.addEventListener('click', function() {
  window.scrollTo(0, 0);
});

（请参阅随附的 HTML 和 CSS 文件以轻松跟随代码。）

你可以在下面看到此代码的演示：

使用动画 Vanilla JS 滚动到页面顶部 - window.scrollTo() 方法的新形式

上述解决方案完成了工作，但它并不能带来良好的用户体验。

window.scrollTo() 方法还有一种新形式，可以让我们为滚动运动设置动画。你可以使用这个漂亮的小动画效果来改进 UX 和用户参与度指标。

新表单的工作方式如下：

window.scrollTo(options)

    // options is a JSON objectwith
    // top: the y-coordinate to scroll to
    // left : the x-coordinate to scroll to
    // behavior : an animated effect with vrious string values like 'smooth',
    // 'slow' etc.

我们可以使用这种方法的这种形式使用 vanilla JavaScript 动画滚动到页面顶部。

let scrollTopBtn = document.getElementById('top');

scrollTopBtn.addEventListener('click', function() {
  window.scrollTo({top: 0, behavior: 'smooth'});
});

（请参阅随附的 HTML 和 CSS 文件以获得更好的理解。）

代码很简单。我们将事件侦听器附加到按钮以触发滚动顶部功能。

回调以新形式实现了 window.scrollTo() 方法。我们通过 top:0 滚动到顶部，我们通过 behavior: 'smooth' 以获得一个很好的均匀动画效果。

你可以在此处查看工作演示：

详细了解 vanilla JS window.scrollTo() 方法此处。

使用 jQuery scrollTop() 方法滚动到页面顶部

你还可以使用 jQuery scrollTop() 方法滚动到页面顶部。

$("#top").on("click",function(){
    $(window).scrollTop(0);
});

逻辑很简单。我们附加了一个事件处理程序来监听滚动到顶部按钮时的 click 事件。

回调执行 $(window).scrollTop(0) 方法并滚动到页面顶部，因为我们将 0 作为其参数传递。

你可以在此处查看工作演示：

通过使用 jQuery animate() 方法动画滚动到页面顶部

像上面的 vanilla JS 解决方案一样，我们可以使用 jQuery 动画滚动到页面顶部以改善 UX。

$("#top").on("click",function(){
    $([document.documentElement,document.body]).animate({
        scrollTop:0
    },1000)
});

让我们深入探讨这里的逻辑。

事件监听器的回调首先选择了 document.documentElement（根元素）或 document.body。我们需要选择两者以确保跨浏览器兼容性。

（提示：这是我们使用 jQuery 的原因之一。稍后会详细介绍。）

然后，我们在选定对象上运行 animate() 方法并更改 scrollTop 属性以达到 0 值（页面顶部。）

最后，我们将动画持续时间作为第二个参数传递给回调。我们在这里通过了 1000 毫秒，但你可以选择任何你喜欢的时间跨度。

这是此方法的工作输出：

专业提示：我们使用 jQuery 来确保更好的跨浏览器兼容性。有时，UI 可能会在不同的浏览器中呈现奇怪的效果，并且很难排除故障。

由于 jQuery 是一个专业的前端库，它的优势在于可以解决跨浏览器不兼容的问题。因此，如果你的 vanilla JS 解决方案在某些浏览器中出现问题，你可以改用该方法的 jQuery 版本。

一行聪明的纯 HTML 滚动到页面顶部 Hack

你还可以使用单行 HTML hack 滚动到页面顶部（没有动画）。

<div>
    <a href="#">To Top</a>
</div>

这是输出的演示。

使用旧的 scrollTop 属性滚动到页面顶部

一些浏览器对我们上面使用的 vanilla JS scrollTo() 方法存在问题。例如，许多用户报告说 MS Edge 并不总是能很好地使用这种方法，

因此，你可以使用带有 scrollTop 属性的旧方法。scrollTop 属性设置要垂直滚动元素的像素。

但是，此属性的一个特殊情况是，当你将其应用于根或 html 元素时，它会移动整个文档。

在此处详细了解 scrollTop 属性。

我们可以使用此属性滚动到页面顶部。

let scrollTopBtn = document.getElementById('top');
scrollTopBtn.addEventListener('click', function() {
  document.getElementsByTagName('html')[0].scrollTop = 0;
});

代码很简单。回调选择了 html 元素并将其 scrollTop 属性设置为 0。

你可以在下面看到工作演示：

使用 JavaScript 动画脚本自定义滚动到页面顶部

最后，我们有一个不错的小脚本来设计自定义滚动到顶部的 JavaScript 动画。我们使用 setInteval() 和 clearInterval() 函数来执行动画效果。

let scrollTopBtn = document.getElementById('top');
scrollTopBtn.addEventListener('click', function() {
  let customAnimScroll = window.setInterval(function() {
    let topOffset = window.pageYOffset;
    if (topOffset > 0) {
      window.scrollTo({top: topOffset - 20});
    } else {
      clearInterval(customAnimScroll);
    }
  }, 20);
});

让我们分解这里的逻辑。

我们在滚动到顶部按钮上的事件处理程序回调内的 window 对象上执行了 setInterval() 函数。setInterval 函数在特定持续时间后重复运行我们传递给它的回调。

它还返回了一个我们存储的 ID，用于启动/停止/修改 setInterval() 方法的特定实例。因此，我们运行 setInterval() 方法并将其 ID 存储在 customAnimScroll 变量中。

setInterval() 函数的回调将 window 对象的 pageYOffset 值存储在 topOffset 变量中。该值是 window 对象向下滚动的像素数。

最后，我们检查了 topOffset 值是否大于 0（意味着 window 向下滚动了一些像素）。如果是，我们使用上面看到的新形式的 scrollTo 方法将 window 向上移动 20 个像素。

在这里，我们选择每个周期向上移动 20 个像素，但你可以选择任何其他数字。

如果 topOffset 值不大于 0，我们已经滚动到 window 的顶部。在这种情况下，我们通过将之前存储在 customAnimScroll 变量中的 ID 传递给 clearInterval() 方法来结束 setInterval() 函数。

你可以在此处查看工作演示：