還在用錨點做頁面內滾動？scrollIntoView讓你一步到位！

yzzz 發布于2019-08-22 18:30 / 819人閱讀

摘要：如果做內部系統，交互要求又不高，這個現在已經是我的首選了，希望大家多多使用

前言

在處理頁面內平滑滾動我們使用的方案無外乎以下幾種

使用a標簽的href屬性

使用location.href

使用第三方庫

關于1、2點，樓主寫了一個例子
http://js.jirengu.com/qevud

缺陷

如果我們使用a標簽的href屬性的話：
其一是受限——只能在a標簽上使用這一功能
其二是a鏈接改變了url，這可能會給我們造成一些不必要的麻煩
其三是沒有動畫效果（這點產品不能忍）

如果我們使用location.href的話：
比a標簽好一點，就是可以使用js控制了，其它大同小異

使用第三方庫可以解決以上的問題，不過麻煩呀

下面，隆重介紹一下今天的主人公 —— Element.scrollIntoView()

Element.scrollIntoView()

Element.scrollIntoView()方法讓當前的元素滾動到瀏覽器窗口的可視區域內

具體的介紹大家可以去MDN自行閱讀，筆者主要介紹它的參數scrollIntoViewOptions對象的behavior屬性。
這個屬性主要是用來提供動畫效果的，其中auto和instant都是瞬間到達元素所在位置，但是smooth提供了一個平滑滾動的動畫效果。

實際應用

隨隨便便擼個什么回到頂部，回到底部，回到這回到那的功能，所以，懂了伐【奸笑臉】

關于兼容性的問題

基本所有瀏覽器（包括IE8但Opera Mini不行）做到基本跳轉是沒問題的，不過動畫效果支持的就太少了，具體大家可以去caniuse上看。

如果做內部系統，交互要求又不高，這個API現在已經是我的首選了，希望大家多多使用~~

GPU云服務器云服務器用錨點做 html 滾動錨點 html錨點跳轉頁面頁面滾動

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/95936.html

scrollIntoView 與平滑滾動

摘要：默認值為，表示立刻滾到底即表示平滑滾動。這時對錨點內鏈觸發的視口滾動同樣有效。它接受兩種形式的值布爾值或對象。接受布爾值主要還是為了兼容不支持平滑滾動老版的瀏覽器。表示行內元素排列方向要滾動到的位置。經常有這樣的需求：點擊一個鏈接（內鏈）跳轉到當前頁面中間某個部分。對于這樣的需求，很容易想到使用錨點實現。但有一個問題：滾動一步到位，太生硬了。我還是比較喜歡平滑滾動。HTML5 中提...

darkbug 2019-08-22 13:49 評論0 收藏0
記 · 滾動條滾動到指定位置(錨點)的不同實現方式

摘要：那什么是錨點問題呢錨點是網頁制作中超級鏈接的一種，又叫命名錨記。命名錨記像一個迅速定位器一樣是一種頁面內的超級鏈接，運用相當普遍。這是標簽提供給我們的錨點解決方式。滾動條緩慢滾動到此為止，一個完整的錨點緩慢滾動就完成了，快去試試吧 showImg(https://segmentfault.com/img/bVbslYF);最近項目中遇到傳統的錨點問題。那什么是錨點問題呢？錨點是網頁...

imingyu 2019-08-02 16:16 評論0 收藏0
記 · 滾動條滾動到指定位置(錨點)的不同實現方式

摘要：那什么是錨點問題呢錨點是網頁制作中超級鏈接的一種，又叫命名錨記。命名錨記像一個迅速定位器一樣是一種頁面內的超級鏈接，運用相當普遍。這是標簽提供給我們的錨點解決方式。滾動條緩慢滾動到此為止，一個完整的錨點緩慢滾動就完成了，快去試試吧 showImg(https://segmentfault.com/img/bVbslYF);最近項目中遇到傳統的錨點問題。那什么是錨點問題呢？錨點是網頁...

kidsamong 2019-08-26 13:43 評論0 收藏0
完美實現一個“回到頂部”

摘要：在瀏覽器中，頁面默認滾動是在標簽上，移動端大多數在標簽上，在我們想要實現平滑回到頂部，只需在這兩個標簽上都加上準確的說，寫在容器元素上，可以讓容器非鼠標手勢觸發的滾動變得平滑，而不局限于，標簽。前言在實際應用中，經常用到滾動到頁面頂部或某個位置，一般簡單用錨點處理或用js將document.body.scrollTop設置為0，結果是頁面一閃而過滾到指定位置，不是特別友好。我們想要...

layman 2019-08-29 17:08 評論0 收藏0
完美實現一個“回到頂部”

摘要：在瀏覽器中，頁面默認滾動是在標簽上，移動端大多數在標簽上，在我們想要實現平滑回到頂部，只需在這兩個標簽上都加上準確的說，寫在容器元素上，可以讓容器非鼠標手勢觸發的滾動變得平滑，而不局限于，標簽。前言在實際應用中，經常用到滾動到頁面頂部或某個位置，一般簡單用錨點處理或用js將document.body.scrollTop設置為0，結果是頁面一閃而過滾到指定位置，不是特別友好。我們想要...

littlelightss 2019-08-23 12:36 評論0 收藏0