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

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

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

前言

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

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

使用location.href

使用第三方庫

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

缺陷

如果我們使用a標(biāo)簽的href屬性的話：
其一是受限——只能在a標(biāo)簽上使用這一功能
其二是a鏈接改變了url，這可能會(huì)給我們?cè)斐梢恍┎槐匾穆闊?br>其三是沒有動(dòng)畫效果（這點(diǎn)產(chǎn)品不能忍）

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

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

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

Element.scrollIntoView()

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

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

實(shí)際應(yīng)用

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

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/95936.html

相關(guān)文章

scrollIntoView 與平滑滾動(dòng)

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

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

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

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

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

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

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

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

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

littlelightss 2019-08-23 12:36 評(píng)論0 收藏0