详解三种方式实现平滑滚动页面到顶部的功能

下面我将详细讲解三种方式实现平滑滚动页面到顶部的功能。

一、使用原生JavaScript实现

1.1 获取页面元素

使用原生JavaScript获取页面中的滚动条位置信息和文档高度信息。

const scrollTop =
window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop

const clientHeight = document.documentElement.clientHeight

const scrollHeight = document.documentElement.scrollHeight

1.2 监听滚动事件

可以使用 window.addEventListener() 监听页面滚动事件，并在回调函数中更新相应变量的值。

window.addEventListener('scroll', () => {
  const scrollTop =
    window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop

  const clientHeight = document.documentElement.clientHeight

  const scrollHeight = document.documentElement.scrollHeight
})

1.3 判断是否滚动到顶部并返回顶部

可以在滚动事件的回调函数中，判断滚动条位置是否已经滚动到页面顶部，并通过 window.scrollTo() 方法将页面位置平滑滚动到页面顶部。

if (scrollTop == 0) {
  return
}

window.scrollTo({
  top: 0,
  behavior: 'smooth'
})

二、使用jQuery实现

2.1 引入jQuery库

在页面中引入jQuery库。

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

2.2 监听滚动事件

使用 $(window).scroll() 监听滚动事件。

$(window).scroll(function () {})

2.3 判断是否滚动到顶部并返回顶部

可以在滚动事件的回调函数中，判断滚动条位置是否已经滚动到页面顶部，并通过 $("html, body").animate() 方法将页面位置平滑滚动到页面顶部。

if ($(window).scrollTop() == 0) {
  return
}

$('html, body').animate({ scrollTop: 0 }, 'slow')

三、使用插件实现

3.1 引入插件

可以使用 jquery.scrollTo 插件实现平滑滚动页面到顶部的功能。需要在页面中引入插件文件。

<script src="path/to/jquery.scrollTo.js"></script>

3.2 使用插件实现功能

可以使用插件提供的 $.scrollTo() 方法实现滚动页面到顶部的功能。

$.scrollTo(0, 500)

以上就是三种方式实现平滑滚动页面到顶部的功能的完整攻略。