背景介紹

產品的需求是：

1.個人信息下面的小項，點擊每一個menu，該項詳情模塊滾動到頂部

2.滾動右側頁面信息，當頁面頂部展示某模塊的內容時，對應的menu菜單選中。

過程分析

根據產品的需求，第一反應這就是錨點的問題，使用a標簽設置錨點問題就能解決。然而在開發過程中發現a標簽的錨點名稱時通過name屬性設置的，而name屬性在html5中已經廢棄掉了。于是考慮自己模擬實現a標簽的錨點功能。

第一步，初始化模塊高度，通過方法計算每一個模塊的高度，比如固定的直接寫死高度，不固定的初始化為0

 const scrollMapping={
 model1: 0,
 model2: 272,
 model3: 228,
 model4: 0,
 model5: 272
 }

第二步，在組建渲染完成后，componentDidMount方法中計算每個模塊的區間，保存在數組scrollRange。

最后，以上兩步完成后，開始去實現兩個需求，

第一個點擊menu，模塊內容滾動到頂部，主要是通過url后的字段判斷，比如http://www.abc.com/test#model3，此時通過遍歷Object.keys(scrollMapping)，累加model*的高度，碰到model3結束，獲取整個高度為tranlateY，然后將滾動內容區塊通過scrollTop屬性設置tranlateY，

第二個，滾動內容區塊，實現menu選中，主要思路就是看內容區塊的scrollTop在scrollRange的哪個區間，比如在index為2-3之間，此時取2，然后通過Object.keys(scroppMapping)[2]就可以獲取定位的菜單

參考鏈接

1. https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a

天我們來看下html中<a></a>的特點與功能

一 .a標簽是超鏈接標簽，首先我們說一下它的特點：

1.在網頁中默認會有下劃線

2.不會繼承父級的顏色樣式

其中，自帶的下劃線不美觀，但我們可以用以下代碼解決，ctrl+s保存后，下劃線就沒有了

二 .下面我們來看看a標簽的幾個功能：

1.跳轉頁面

href 屬性要跳轉頁面的地址（沒地址的情況下可以寫一個#）,即可以給網絡的地址也可以給本地的地址

target 屬性

值：_blank在新頁面打開

_self 在本頁面打開（默認的）

2.錨點

作用：網頁太長時，通過點擊頁面某一個導航，頁面直接到達該內容，網頁還是該網頁，只是向下自己滑動。

實現方法：在 href 的值里寫上#name,name對應id的值

下面是一個簡單例子，點擊顏色就會跳轉到相應顏色區域

3.下載

作用：實現網頁的下載功能

實現方法：在 href 里寫上文件的地址就可以了

注意：如果你要下載的文件瀏覽器能夠讀出來，那它就不會被下載，而是會被直接打開。如果就想讓瀏覽器下載所有文件，那就在a標簽里添加一個屬性download（ h5 新增屬性，不兼容IE低版本），它的值寫上文件的名字加后綴名

三.此外，介紹一下a標簽的顏色，給a標簽換顏色也是會經常用到的，但是怎么改呢？

這里用到了“偽類”，偽類：針對元素的某種狀態添加的不同樣式

a :link 未訪問鏈接的（顏色）狀態

:visited訪問過的鏈接的（顏色）狀態

:hover鼠標移入（懸停）（顏色）狀態

:active鼠標按下不動時候的（顏色）狀態

今天的a標簽就介紹到這里，你學到了嗎？