使用 JavaScript/jQuery 滚动到页面顶部

在网页中，我们经常需要在页面中添加滚动到顶部的按钮，以方便用户快速返回页面顶部。在本文中，我们将介绍如何使用 JavaScript/jQuery 实现这一功能。

使用 JavaScript 实现滚动到页面顶部

使用 JavaScript 实现滚动到页面顶部的功能比较简单，我们只需要监听滚动事件，当滚动距离大于或等于页面高度时，将页面滚动到顶部即可。

// 监听页面滚动事件
window.onscroll = function() {
  // 当页面滚动距离大于或等于页面高度时
  if (document.documentElement.scrollTop >= document.documentElement.offsetHeight) {
    // 将页面滚动到顶部
    document.documentElement.scrollTop = 0;
  }
}

在上述代码中，我们使用 onscroll 监听了页面滚动事件，当页面滚动距离大于或等于页面高度时，我们将页面滚动到顶部。

使用 jQuery 实现滚动到页面顶部

使用 jQuery 实现滚动到页面顶部同样非常简单，我们只需要给页面中的“返回顶部按钮”添加点击事件，当点击该按钮时，将页面滚动到顶部即可。

// 给返回顶部按钮添加点击事件
$('#back-to-top').click(function() {
  // 将页面滚动到顶部
  $('html,body').animate({scrollTop: 0}, 500);
});

在上述代码中，我们使用 click 给返回顶部按钮添加了点击事件，当点击该按钮时，我们使用 animate 方法将页面滚动到顶部。

总结

本文介绍了使用 JavaScript/jQuery 实现滚动到页面顶部的功能，使用这些代码片段可以方便快速地实现页面中“返回顶部”功能。对于 JavaScript/jQuery 的掌握程度越高，实现该功能的代码会越简单。