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

yzzz 發(fā)布于2019-08-22 18:30 / 817人閱讀

摘要：如果做內(nèi)部系統(tǒng)，交互要求又不高，這個現(xiàn)在已經(jīng)是我的首選了，希望大家多多使用

前言

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

使用a標(biāo)簽的href屬性

使用location.href

使用第三方庫

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

缺陷

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

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

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

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

Element.scrollIntoView()

Element.scrollIntoView()方法讓當(dāng)前的元素滾動到瀏覽器窗口的可視區(qū)域內(nèi)

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

實際應(yīng)用

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

關(guān)于兼容性的問題

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

如果做內(nèi)部系統(tǒng)，交互要求又不高，這個API現(xiàn)在已經(jīng)是我的首選了，希望大家多多使用~~

云服務(wù)器 GPU云服務(wù)器用錨點做 html 滾動錨點 html錨點跳轉(zhuǎn)頁面頁面滾動

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/95936.html

相關(guān)文章

scrollIntoView 與平滑滾動

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

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

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

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

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

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

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

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

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

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