成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

記 · 滾動條滾動到指定位置(錨點)的不同實現(xiàn)方式

imingyu / 3174人閱讀

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


最近項目中遇到傳統(tǒng)的錨點問題。那什么是錨點問題呢？

錨點 是網(wǎng)頁制作中超級鏈接的一種，又叫命名錨記。命名錨記像一個迅速定位器一樣是一種頁面內(nèi)的超級鏈接，運用相當(dāng)普遍。并且可以對網(wǎng)站內(nèi)容通過菜單進(jìn)行快速定位。

上圖所示為錨點示意圖，那這種需求我們怎么實現(xiàn)呢？下面我就來提供一些在不同場景下，可以使用的錨點方式。

1.first blood

在傳統(tǒng)開發(fā)過程中，我們的錨點都是通過a標(biāo)簽跳轉(zhuǎn)至對應(yīng)ID的形式進(jìn)行需求實現(xiàn)的。

Menu1
Menu2


Content1


Content2

這是a標(biāo)簽提供給我們的錨點解決方式。

2.double kill

原生js去獲取并修改scrollTop

這種情況，我們一般用于固定頁面元素的錨點設(shè)置，或者設(shè)置返回頂部按鈕。

// 通過element.scrollTop來獲取當(dāng)前元素滾動條高度
// 可以在控制臺輸出下
document.documentElement.scrollTop  ====> number  
// 返回一個number類型的內(nèi)容，是滾動條的高度


// 也可以通過給scrollTop賦值去設(shè)置滾動條高度
// 在控制臺輸出
document.documentElement.scrollTop = 0
// 會發(fā)現(xiàn)已經(jīng)滾動的滾動條，滾動到頁面最頂端。

在js的世界里，瀏覽器的兼容性總是讓人那么頭疼

Safari中使用的是 window.pageYOffset
IE中是 document.body.scrollTop 以及 document.documentElement.scrollTop；

所以考慮到瀏覽器兼容性問題，最后總結(jié)出一句完美兼容的代碼。

// 獲取滾動條高度兼容性寫法
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

3.triple kill

Element?.scroll?Into?View()
這個方法在MDN上的解釋是實驗中的功能，但是親測主流瀏覽器是可用，并且出奇的好用。話不多說，直接上代碼。

// 將某個元素跳轉(zhuǎn)到瀏覽器視口的最上方
element.scrollIntoView()

語法:

// 等同于element.scrollIntoView(true) 
element.scrollIntoView();

// Boolean型參數(shù)
// true  元素的頂端將和其所在滾動區(qū)的可視區(qū)域的頂端對齊 ； false 元素的底端將和其所在滾動區(qū)的可視區(qū)域的底端對齊 
element.scrollIntoView(alignToTop); 

// 一個帶有選項的object：
// {
//     behavior: "auto"(默認(rèn))  | "instant" | "smooth"(緩動),
//     block:    "start" | "end",
// }
element.scrollIntoView(scrollIntoViewOptions); // Object型參數(shù)

4.quadra kill

目前來講基本的錨點功能已經(jīng)實現(xiàn)了，點擊menu就會跳轉(zhuǎn)到對應(yīng)的content

但是看起來還是有些生硬。咻~ 的一下就過去了，所以加個緩動來提升下用戶體驗吧。

在你需要滾動的div的樣式里面加一句。

scroll-behavior: smooth; // 滾動條緩慢滾動

5.penta kill

到此為止，一個完整的錨點緩慢滾動就完成了，快去試試吧?。?！

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

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

相關(guān)文章

  • 記 · 滾動條滾動到指定位置(錨點)的不同實現(xiàn)方式

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

    kidsamong 評論0 收藏0

  • 可視化效果(Visual effects)

    摘要：一般地，一個塊盒的內(nèi)容都被限制在該盒的邊內(nèi)。這種盒并不一定會根據(jù)其祖先的屬性裁剪。默認(rèn)情況下，元素不會被裁剪。在閉合路徑內(nèi)的內(nèi)容會顯示，而路徑外邊的都會被剪掉著作權(quán)歸作者所有。 Overflow and clipping 一般地，一個塊盒的內(nèi)容都被限制在該盒的content邊內(nèi)。某些情況下，一個盒可能會溢出，意味著它的部分內(nèi)容或者全部內(nèi)容位于該盒外部，例如： 一行無法拆分，導(dǎo)致行盒比...

    JowayYoung 評論0 收藏0

  • 淺說虛擬列表的實現(xiàn)原理

    摘要：虛擬列表的實現(xiàn)有多種方案，本文以組件為基礎(chǔ)進(jìn)行分析。常見的無限滾動便是延遲渲染的一種實現(xiàn)，而虛擬列表則是按需渲染的一種實現(xiàn)。接下來，本文會簡單介紹虛擬列表的一種實現(xiàn)方案。實現(xiàn)本章節(jié)將會創(chuàng)建一個組件，并結(jié)合代碼，慢慢梳理虛擬列表的實現(xiàn)。 在 列表數(shù)據(jù)的展示優(yōu)化 一文中，提到了對于列表形態(tài)的數(shù)據(jù)展示的按需渲染。這種方式是指根據(jù)容器元素的高度以及列表項元素的高度來顯示長列表數(shù)據(jù)中的某一個部分...

    趙春朋 評論0 收藏0

  • 前端知識點總結(jié)——HTML

    摘要：跨列從指定單元格的位置處開始，橫向向右合并幾個單元格包含自己，被合并的單元格要刪除。 前端知識點總結(jié)——HTML HTML：HTML4.01 指的就是網(wǎng)頁技術(shù)HTML5：HTML4.01的升級版本 1.web的基礎(chǔ)知識 web與Internet 1.Internet:全球性的計算機(jī)互聯(lián)網(wǎng)絡(luò)，因特網(wǎng)，互聯(lián)網(wǎng)，交互網(wǎng) 2.提供服務(wù) 訪問網(wǎng)站：www（world wide web）服務(wù) ...

    sourcenode 評論0 收藏0

  • 返回頂部的幾種實現(xiàn)

    摘要：返回頂部這里初始狀態(tài)的返回頂部為不可見，通過判斷頁面滾動高度切換顯示隱藏，的樣式可以自己設(shè)計。 showImg(https://segmentfault.com/img/bVGDef?w=1390&h=540); 返回頂部的按鈕大家并不陌生，針對長滾動條的信息流頁面添加返回頂部的按鈕可以給用戶良好的體驗，而返回頂部的實現(xiàn)也是多種多樣，本文分享幾個案例并給出評價 作為引子講一個常用的案例...

    SillyMonkey 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<