5行JavaScript代碼實現(xiàn)頁面平滑滾動

時間：2023-10-06 12:48:01 | 來源：網(wǎng)站運營

時間：2023-10-06 12:48:01 來源：網(wǎng)站運營

5行JavaScript代碼實現(xiàn)頁面平滑滾動：

本文轉(zhuǎn)載自：眾成翻譯
譯者：為之漫筆
鏈接：5行JavaScript代碼實現(xiàn)頁面平滑滾動 - 眾成翻譯
原文：Smooth Page Scroll in 5 Lines of JavaScript

HTML本身具有跳到頁面任意位置的能力，只需給目標元素一個id 屬性即可。這個技術(shù)叫做“錨鏈接”。

不過，這種跳轉(zhuǎn)是瞬間完成的。為了讓人看起來舒服，很多網(wǎng)站都會給頁內(nèi)跳轉(zhuǎn)加上平滑或慢慢滾動到頁面某處的設計。

過去人們大都用jQuery來實現(xiàn)此設計，但為這就加載一個框架有點小題大做。現(xiàn)代JavaScript為此提供了原生的window.scrollTo方法，效率更高。

首先，還是要有一個標準的錨鏈接，以防新技術(shù)不可用，還可以照老樣子跳到目標。

<a href="#destination">Click me: I’m <em>smoooooth</em>.</a>…<p id="destination">This is the target, further down the page.

顯然，只有頁面長度超過窗口高度才可能真的跳轉(zhuǎn)。為此，請自行在前面代碼中省略號位置補充足夠多的內(nèi)容（或者試試我們推薦的填充文本生成器)。

兩種滾動

頁面滾動的API有兩種實現(xiàn)方式：CSS和JavaScript。兩種方式本身就容易讓人困惑，再加上有些瀏覽器支持有些瀏覽器不支持，或者只以實驗方式支持，問題就顯得復雜了。（參見下文。）

CSS實現(xiàn)方式下，需要給“平滑滾動”的元素（通常是body）應用scroll-behavior: smooth（CSS參考）:

body { scroll-behavior: smooth;}

注意，別用英式寫法，是scroll-behavior，沒有“u”。

JavaScript方式

JavaScript代碼要添加到頁面最后，以免阻塞。沒錯，我們說了只用5行代碼。這里為方便解釋，我稍微增加幾行：

var anchorLink = document.querySelector("a[href='#destination']"),target = document.getElementById("destination");anchorLink.addEventListener("click", function(e) { if (window.scrollTo) { e.preventDefault(); window.scrollTo({"behavior": "smooth", "top": target.offsetTop}); }})先用querySelector通過CSS屬性選擇符找到href目標為#destination的鏈接。在鏈接的點擊事件中，測試瀏覽器是否支持scrollTo方法。如果支持，先用e.preventDefault阻止瀏覽器立即跳轉(zhuǎn)，然后調(diào)用scrollTo方法，由前面的CSS聲明實現(xiàn)平滑效果。有3個選項：behavior、top必需，left可選。后兩個指的是跳轉(zhuǎn)目標在頁面中的位置坐標值。

可以用window.scroll代替window.scrollTo，它們功能一樣。

相對于加載框架，這幾行代碼簡單得多。唯一的缺點是不允許修改計時函數(shù)或緩動函數(shù)，據(jù)說是防止被濫用。

腳本抽象

前面的腳本可以用，但要求你必須提前知道跳轉(zhuǎn)目標的名字，而且只能應用到一個鏈接。要是頁面中有多個鏈接，需要平滑跳轉(zhuǎn)到多個目標呢？這時就需要對腳本做一點抽象。

因為我們要引用nodeList，所以先寫一個幫助函數(shù)，在forEach循環(huán)里關聯(lián)鏈接：

var forEach = function (array, callback, scope) { for (var i = 0; i < array.length; i++) { callback.call(scope, i, array[i]); }};然后，找到所有錨鏈接和它們的地址，給它們的點擊事件注冊scrollTo：


var anchorLinks = document.querySelectorAll("a[href^='#']");if (window.scrollTo) { forEach(anchorLinks, function(index, element) { var target = document.getElementById(element.getAttribute("href").substring(1)); element.addEventListener("click", function(el) { el.preventDefault(); window.scrollTo(0, target.offsetTop); }) });}注意，同樣需要在body標簽的CSS樣式中添加scroll-behavior聲明。

瀏覽器支持

以上技術(shù)當前面臨的問題是瀏覽器兼容性，現(xiàn)在只有Firefox和Chrome支持window.scrollTo，而且后者還把實現(xiàn)隱藏在chrome://flags中一個“實驗性網(wǎng)絡平臺功能”的選項里（需要手工啟用）。

正像一開始咱們說的，前面的腳本是基于“漸進增強”原則寫的，所以不支持的瀏覽器照樣能正確跳轉(zhuǎn)，只是不能平滑地滾過去而已。為此，我推薦Dustan Kasten寫的“膩子腳本”smoothscroll。

結(jié)論

這個技術(shù)經(jīng)常與“粘貼便簽”（sticky）聯(lián)用，后者會隨著頁面滾動一直出現(xiàn)在窗口中。更多內(nèi)容，歡迎參考我的另一篇文章。

—————————————————————————————————————————

在學習過程如果有任何疑問，請來極樂網(wǎng)(http://www.dreawer.com)提問，或者掃描下方二維碼，關注極樂官方微信，在平臺下方留言。