锚点和平滑滚动

在 <html> 元素上提供以 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, -10000)
document.documentElement.scrollBy(0, -10000)

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)
  }
}

查看效果