滚动到页面顶部的多种代码实现

2023-05-0808:27:18WEB前端开发Comments795 views字数 2841阅读模式

锚点和平滑滚动

在 <html> 元素上提供以 ID 为目标的链接文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/38773.html

<div id="top"></div>
<a href="#top">跳转到页面顶部</a>

我们可以使用最新的 scroll-behavior 属性来实现 CSS 平滑滚动文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/38773.html

html {
  scroll-behavior: smooth;
}

查看效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/38773.html

scrollTo、scrollBy、scrollIntoViwe

先给根节点添加 scroll-behavior 属性来实现 CSS 平滑滚动文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/38773.html

html {
  scroll-behavior: smooth;
}

接下来给按钮添加点击事件，在任意使用 scrollTo、scrollBy 或 scrollIntoViwe 方法，实现滚动到顶部。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/38773.html

Window.scrollTo() 滚动到文档中的某个坐标。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/38773.html

Elem.scrollTo() 方法可以使界面滚动到给定元素的指定坐标位置。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/38773.html

window.scrollTo(0, 0)
document.documentElement.scrollTo(0, 0)

Window.scrollBy() 在窗口中按指定的偏移量滚动文档。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/38773.html

Elem.scrollBy() 方法是使得元素滚动一段特定距离。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/38773.html

window.scrollBy(0, -10000)
document.documentElement.scrollBy(0, -10000)

Window.scroll() 滚动窗口至文档中的特定位置。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/38773.html

Elem.scroll() 方法是用于在给定的元素中滚动到某个特定坐标。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/38773.html

window.scroll(0, 0)
document.documentElement.scroll(0, 0)

Elem.scrollIntoViwe(top) 将滚动页面以使 Elem 可见。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/38773.html

top=true（默认值），页面滚动，使 Elem 出现在窗口顶部。元素的上边缘将与窗口顶部对齐。
top=false ，页面滚动，使 Elem 出现在窗口底部。元素的底部边缘将与窗口底部对齐。

document.documentElement.scrollIntoView()

查看效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/38773.html

检测滚动位置：`scroll` 事件

使用 document.documentElement 返回文档的根元素，我们需要它来获取偏移值
在按钮上添加 click 事件监听器。在 scrollToTop 函数内部，使用 scrollTo 方法将其滚动到屏幕顶部。

const scrollToTopBtn = document.querySelector('.scrollToTopBtn')
const rootElement = document.documentElement

const scrollToTop = () => {
  rootElement.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
}

scrollToTopBtn.addEventListener('click', scrollToTop)

接下来就是显示按钮了，我们可以使用滚动事件侦听器检测滚动。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/38773.html

handleScroll 函数在每次用户滚动时都会被调用。现在，我们需要可以滚动的像素总数。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/38773.html

Element.scrollHeight 只读属性。给出元素的内容高度，包括由于溢出而不可见的部分。
Element.clientHeight 只读属性。给出元素的内部高度（以像素为单位），即可见部分的高度，包含内边距，但不包括水平滚动条、边框和外边距。

function handleScroll() {
  const scrollTotal = rootElement.scrollHeight - rootElement.clientHeight
  if (rootElement.scrollTop / scrollTotal > 0.8) {
    scrollToTopBtn.classList.add('showBtn')
  } else {
    scrollToTopBtn.classList.remove('showBtn')
  }
}

document.addEventListener('scroll', handleScroll)

查看效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/38773.html

Intersection Observer API

Intersection Observer API 提供了一种异步观察目标元素与祖先元素或顶级文档的视口相交的更改的方法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/38773.html

比起上一节中 scroll 事件监听滚动，Intersection Observer API 在解决这类问题上是绝佳解决方案。这是一个相当新的浏览器 API，使开发人员可以以更优化的方式将大多数任务交给浏览器。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/38773.html

const target = document.querySelector('footer')
const scrollToTopBtn = document.querySelector('.scrollToTopBtn')
const rootElement = document.documentElement

// 一旦页脚进入或离开视口，将添加或删除类。回调接收 entries 数组作为参数。
function callback(entries, observer) {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      scrollToTopBtn.classList.add('showBtn')
    } else {
      scrollToTopBtn.classList.remove('showBtn')
    }
  })
}

const observer = new IntersectionObserver(callback)
observer.observe(target)

function scrollToTop() {
  rootElement.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
}

scrollToTopBtn.addEventListener('click', scrollToTop)

查看效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/38773.html

requestAnimationFrame 设置动画

window.requestAnimationFrame() 告诉浏览器，你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/38773.html

Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。
使用 window.requestAnimationFrame() 来设置滚动动画。

const scrollToTop = () => {
  const c = document.documentElement.scrollTop || document.body.scrollTop
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop)
    window.scrollTo(0, c - c / 8)
  }
}