使用React，自己模擬實現a標簽的錨點功能

求設計

背景介紹

產品的需求是：

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標簽顏色

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

.語法

在HTML中創建超鏈接非常簡單，只需用標簽環繞需要被鏈接的對象即可，其基本語法格式如下：

<a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>

href屬性：鏈接的地址，鏈接的地址可以是一個網頁，也可以是一個視頻、圖片、音樂等等。

target屬性：

_blank：在一個新的窗口中打開鏈接
_self(默認值)：在當前窗口中打開鏈接
_parent：在父窗口中打開頁面（框架中使用較多）
_top：在頂層窗口中打開文件（框架中使用較多）

2.外部鏈接

可以打開別人的網頁：

<a href="https://www.baidu.com">在當前窗口打開百度</a><a href="https://www.baidu.com" target="_self">在當前窗口打開百度</a><a href="https://www.baidu.com" target="_blank">在新的窗口打開百度</a>

3.內部鏈接

直接鏈接內部頁面名稱即可：

<a href="1.外部鏈接.html">打開內部鏈接</a>

4.空鏈接

如果當時沒有確定鏈接目標時，通常將鏈接標簽的href屬性值定義為“#”(即href="#")，表示該鏈接暫時為一個空鏈接：

<a href="#">空鏈接</a>

5.錨點鏈接

通過創建錨點鏈接，用戶能夠快速定位到目標內容。創建錨點鏈接分為兩步：

<h1 id="top">頂部</h1>...<a href="#top">回到頂部</a>

跳轉到其他頁面：

<a href="5.錨點鏈接2.html#top">回到另一個頁面頂部</a>

5.錨點鏈接2.html

<h1 id="top">頂部</h1>

6.base 標簽

base 可以設置整體鏈接的打開狀態

base 寫到 head 之間

<head>  <meta charset="utf-8">  <title>文檔標題</title>  <base target="_blank"></head><body>  <a href="http://www.baidu.com">在新窗口打開百度</a>  <a href="http://www.baidu.com" target="_self">在當前窗口打開百度</a></body>

7.設置鏈接的顏色

link連接的顏色
alink正在點擊的顏色
vlink已經訪問的連接顏色

<body link="red" alink="yellow" vlink="green">  <a href="https://taobao.com">淘寶</a>  <a href="https://jingdong.com">京東</a></body>

在線咨詢

上一篇：機關事業單位房補預計將于12月份發放
下一篇：JavaScript 函數

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商