返回顶部的多种方法

这是我参与更文挑战的第 7 天，活动详情查看：更文挑战

目标效果：

锚点和平滑滚动

给一个在顶部的 <div> 元素上提供以 ID 为目标的连接

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

在使用最新的 scroll-behavior 属性来实现 CSS 平滑滚动

html {
  scroll-behavior: smooth;
}
复制代码

查看效果

scrollTo、scrollBy、scrollIntoViwe

先给根节点添加 scroll-behavior 属性来实现 CSS 平滑滚动

html {
  scroll-behavior: smooth;
}
复制代码

接下来给按钮添加点击事件，在任意使用 scrollTo、scrollBy 或 scrollIntoViwe 方法，实现滚动到顶部。

Window.scrollTo() 滚动到文档中的某个坐标。

Elem.scrollTo() 方法能够使界面滚动到给定元素的指定坐标位置。

window.scrollTo(0, 0)
document.documentElement.scrollTo(0, 0)
复制代码

Window.scrollBy() 在窗口中按指定的偏移量滚动文档。

Elem.scrollBy() 方法是使得元素滚动一段特定距离。

window.scrollBy(0, -100000)
document.documentElement.scrollBy(0, -100000)
复制代码

Window.scroll() 滚动窗口至文档中的特定位置。

Elem.scroll() 方法是用于在给定的元素中滚动到某个特定坐标。

window.scroll(0, 0)
document.documentElement.scroll(0, 0)
复制代码

Elem.scrollIntoViwe(top) 将滚动页面以使 Elem 可见。

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

document.documentElement.scrollIntoView()
复制代码

查看效果

检测滚动位置：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)
复制代码

接下来就是显示按钮了，咱们能够使用滚动事件侦听器检测滚动。

handleScroll 函数在每次用户滚动时都会被调用。如今，咱们须要能够滚动的像素总数。

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

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

document.addEventListener('scroll', handleScroll)
复制代码

查看效果

Intersection Observer API

Intersection Observer API 提供了一种异步观察目标元素与祖先元素或顶级文档的视口相交的更改的方法。

比起上一中 scroll 事件监听滚动，Intersection Observer API 在解决这类问题上是绝佳解决方案。这是一个至关新的浏览器 API，使开发人员能够以更优化的方式将大多数任务交给浏览器。

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)
复制代码

查看效果

requestAnimationFrame 设置动画

window.requestAnimationFrame() 告诉浏览器，你但愿执行一个动画，而且要求浏览器在下次重绘以前调用指定的回调函数更新动画。该方法须要传入一个回调函数做为参数，该回调函数会在浏览器下一次重绘以前执行

• 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)
  }
}
复制代码

查看效果