返回頂部的多種方法

這是我參與更文挑戰的第 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)
  }
}
複製代碼

查看效果