摘要：不過這個效果感覺上就像是閃一下就切換到該位置。為了使用體驗上的感覺有時候網站會設計一種平滑捲動到該位置的效果。的方式非常簡單，只要在該元素設定注意是而不是這個方式非常方便不過目前只有支援，查閱。
眾所皆知 HTML 錨點(anchor link)透過給定標籤 id 屬性跳到頁面上特定位置的功能。不過這個效果感覺上就像是閃一下就切換到該位置。
為了使用體驗上的感覺有時候網站會設計一種平滑捲動到該位置的效果。
在過去這樣的效果通常會透過 jQuery 來達成，但有時候一些簡單的頁面為了達成這個功能就需要載入一堆函式庫或框架這未免有點矯枉過正。
最新的 Javascript 提供了一個更有效率，加強原生 window.scrollTo 的方式。
一個標準的錨點已經是一個被廣泛使用的基本技巧: 透過這種方式就算新的 smooth scroll 滑順捲動的語法不被支援就的方法仍然會運作，就是跳到該位置。
Click to somewhere ...This is the target
兩種方式要注意的是頁面內容要超過可視區域就是至少 scroll bar 要出現，如果瀏覽器已經在畫面上顯示出兩者且沒得捲就沒有效果。因此我們需要在連結和錨點之間補上一些內容。
由於 Smooth Scrolling API 有兩種，一種是 CSS, 一種則是 Javascript。也因此造成混亂的原因是部分瀏覽器有支援上不一致。
CSS 的方式非常簡單，只要在該元素設定 scroll-behavior: smooth;
body {
scroll-behavior: smooth;
}
注意是 behavior 而不是 behaviour
這個方式非常方便不過目前只有 Firefox 支援，查閱 Can I Use。
Javascript然後是 Javascript 的方式
var anchor = document.querySelector("a[href="#dest"]")
var target = document.getElementById("dest")
anchor.addEventListener("click", function (e) {
if (window.scrollTo) {
e.preventDefault()
window.scrollTo({"behavior": "smooth", "top": target.offsetTop})
}
})
注意到 window.scrollTo 跟現有的 Javascript 在參數上有些不同，如果你直接用在 Chrome 下，您就會出現參數數量不對的錯誤，所以實務上要應用還是需要額外做些處理。
另外這種方式有一個缺點，那就是我們不能自訂 timing function。
延伸上面的 script 已經可以讓單一的錨點正常的運作，不過這種方式有點面對大量連結的時候有點麻煩。假如我們在這個頁面有幾個錨點都要這功能，那麼我們可以簡單的實作如下。
var applyScrolling = function (arr, cb) {
for (var i = 0; i < arr.length; i++) {
cb.call(null, i, arr[i])
}
}
// 注意如果有使用 router 那麼自訂一個 class 可以避免一些問題
var anchors = document.querySelectorAll("a[href^="#"]")
if (window.scrollTo) {
applyScrolling(anchors, function (index, el) {
var target = document.getElementById(el.getAttribute("href").substring(1))
el.addEventListener("click", function (e) {
console.log(target)
e.preventDefault()
// 這邊跟新的 method 參數是不同的。
window.scrollTo(0, target.offsetTop)
})
})
}
譯者小結
目前在 Firefox 下兩種方式都可以使用，而 Chrome 則需要額外的開啟設定。本文就是先記錄一下這些新的屬性與 API。
參考Smooth Page Scroll in 5 Lines of JavaScript
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115289.html
摘要：不過這個效果感覺上就像是閃一下就切換到該位置。為了使用體驗上的感覺有時候網站會設計一種平滑捲動到該位置的效果。的方式非常簡單，只要在該元素設定注意是而不是這個方式非常方便不過目前只有支援，查閱。 眾所皆知 HTML 錨點(anchor link)透過給定標籤 id 屬性跳到頁面上特定位置的功能。不過這個效果感覺上就像是閃一下就切換到該位置。為了使用體驗上的感覺有時候網站會設計一種平滑捲...
摘要：相對於座標在可視區的最左上角。滑鼠座標通常透過事件取得。再次強調不幸的是沒有屬性可以直接取得元素對應的座標。觸發事件的元素相對於父容器定位元素的座標，從開始計算。上個座標與當前的座標移動距離。 座標系統 在瀏覽器中有兩種座標系統 & 滑鼠座標： 1. 相對於 `document` - 座標 (0, 0) 在整個頁面的最左上角。 2. 相對於 `window` - 座標 (0, 0) 在...
摘要：接下來我們將會更具體的說明是什麼東西和這傢伙會怎麼解決這些問題，並且列出目前開發中一些令人興奮的功能。這個功能甚至還沒有一個瀏覽器支援。完整的清單請查閱目前還未被寫入規範，意思是這邊提到任何內容極有可能會改變。 譯者：其實...我想說這可能是最令我感到興奮..但又害怕頭痛的功能... 附上原文連結 你曾經想要使用某個 CSS 的新功能，但是最後卻因為這個功能瀏覽器還未全面支援而放棄了嗎...
摘要：在浏览器中，页面默认滚动是在标签上，移动端大多数在标签上，在我们想要实现平滑回到顶部，只需在这两个标签上都加上准确的说，写在容器元素上，可以让容器非鼠标手势触发的滚动变得平滑，而不局限于，标签。 前言 在实际应用中，经常用到滚动到页面顶部或某个位置，一般简单用锚点处理或用js将document.body.scrollTop设置为0，结果是页面一闪而过滚到指定位置，不是特别友好。我们想要...
摘要：在浏览器中，页面默认滚动是在标签上，移动端大多数在标签上，在我们想要实现平滑回到顶部，只需在这两个标签上都加上准确的说，写在容器元素上，可以让容器非鼠标手势触发的滚动变得平滑，而不局限于，标签。 前言 在实际应用中，经常用到滚动到页面顶部或某个位置，一般简单用锚点处理或用js将document.body.scrollTop设置为0，结果是页面一闪而过滚到指定位置，不是特别友好。我们想要...
阅读 1682·2021-11-23 09:51
阅读 744·2021-10-08 10:05
阅读 2794·2021-09-26 09:55
阅读 844·2021-09-22 15:21
阅读 1436·2021-09-09 09:33
阅读 942·2019-08-30 15:56
阅读 1100·2019-08-30 15:55
阅读 852·2019-08-30 13:19
