整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          神奇的html錨點,讓你的網頁在內部自由的跳轉

          起html的錨點這個概念,你可能會感到會陌生,感覺自己沒有聽過。但是如果說起它的作用,你可能就恍然大悟了,就像你說起一個演員,可能不知道是誰,但是說起它演的一個角色可能立馬就知道那個人是誰了。

          那么,什么是錨點呢?

          錨點存在于html中,在默認情況下,可以快速的定位到指定元素,并將元素置于頁面最頂端。當然我們可以按照自己的需求來確定錨點的位置,不一定要讓其定位在頂部。現如今有無數多的頁面已經用上了錨點,比如Vue.js的官網,在我們點擊標題“Vue.js是什么”和標題“起步”的時候,標題都會自動移到頁面頂端。

          錨點的使用

          那接下來,我們就來看看幾種錨點的使用方法。

          • id定位

          最基本的使用方法如下,當點擊<a>標簽時,頁面會相應的將該div內容置頂

          錨點的id定位方法

          • name定位

          除了id,還可以通過name進行定位,不過需要主要的是,如果采用name屬性進行定位的話,只適用于a標簽,類似于p標簽等都不支持。

          錨點的name定位方法

          • javascript代碼進行定位

          在原生的javascript中,有一個scrollIntoView()方法,可以實現頁面的錨點

          javascript方法實現錨點

          • 一個綜合的例子

          講了三種實現方法后,接下來看一個實際運用的例子。首先是實際效果圖,在點擊左側欄時,頁面右邊會相應的顯示指定段落的內容

          錨點的實際使用

          首先看下html頁面的內容,左側的ul代碼

          左側的ul代碼

          右側的內容部分代碼

          右側內容部分代碼

          css部分的代碼

          css部分的代碼

          將上述的代碼寫在一個html文件中,便可實現左側欄點擊,右側欄顯示相應內容的效果。

          • 特殊情況

          在實際項目中,我們總會遇到這樣一種情況,在頁面頂部有固定頭內容的時候,如果直接使用上述方法,會得不到想要的效果

          直接使用錨點的效果圖

          通過該圖可以看出,第三段內容的標題被遮住了,實際應該往下再顯示一點

          那么,我們該怎么解決這個問題呢?在這里我想到了兩種方法,第一種是在每個內容div上加一個隱藏的p元素,給p元素一個定高,再向上偏移,這種方法會導致頁面出現很多個多余的p元素,不推薦使用。

          第二種是利用偽元素,偽元素可以占用實際的高度,這是推薦使用的方法

          偽元素的樣式

          通過給h3標簽添加偽元素樣式,可完美解決這個問題,效果圖如下

          使用偽元素后的效果圖

          • 總結

          今天的內容你會了么?如果還沒有掌握的話,可以按照文章中的代碼,進行實踐,代碼總是要多敲才更容易理解。

          如果喜歡的話,記得關注小編噢,小編后續會堅持出更多技術性的文章,如果有任何問題,也歡迎提問,小編都會盡力解答的。

          、頁面內跳轉的錨點設置

          頁面內的跳轉需要兩步:

          方法一:

          ①:設置一個錨點鏈接<a href="#miao">去找喵星人</a>;(注意:href屬性的屬性值最前面要加#)

          ②:在頁面中需要的位置設置錨點<a name="miao"></a>;(注意:a標簽中要寫一個name屬性,屬性值要與①中的href的屬性值一樣,不加#)標簽中按需填寫必要的文字,一般不寫內容

          方法二:

          ①:同方法一的①

          ②:設置錨點的位置 <h3 id="miao">喵星人基地</h3>;在要跳轉到的位置的標簽中添加一個id屬性,屬性值與①中href的屬性值一樣,不加#

          方法二不用單獨添加一個a標簽來專門設置錨點 ,只在需要的位置的標簽中添加一個id即可。

          小案例:

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

          <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

          <head>

          <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

          <title>萌寵集結號</title>

          </head>

          <body>

          <ul>

          <li><a href="#miao">去找喵星人</a></li>

          <li><a href="#wang">去找汪星人</a></li>

          <li><a href="#meng">其他萌物</a></li>

          </ul>

          <a name="miao"></a><!--設置錨點方法1-->

          <h3 id="miao">喵星人基地</h3><!--設置錨點方法2-->

          <p>喵喵喵~</p>

          <p>喵喵喵~</p>

          <p>喵喵喵~</p>

          <p>喵喵喵~</p>

          <p>喵喵喵~</p>

          <p>喵喵喵~</p>

          <a name="wang"></a>

          <p>汪汪汪~</p>

          <p>汪汪汪~</p>

          <p>汪汪汪~</p>

          <p>汪汪汪~</p>

          <p>汪汪汪~</p>

          <p>汪汪汪~</p>

          <a name="meng"></a>

          <p>萌萌萌~</p>

          <p>萌萌萌~</p>

          <p>萌萌萌~</p>

          <p>萌萌萌~</p>

          <p>萌萌萌~</p>

          <p>萌萌萌~</p>

          </body>

          </html>

          二、跨頁面跳轉

          ①:設置錨點鏈接,在href中的路徑后面追加:#+錨點名,即可

          如:<a href="萌寵集結號.html#miao">跳轉到萌寵集結號頁面</a>

          ②:要跳轉到的頁面中要設置錨點,方法見一種的步驟②,兩個方法任選其一。

          、錨點鏈接的概念

          我們在瀏覽一個網頁的時候,通常會遇到比較長的網頁,一直向下拉滾動條一直向下,而在最底部的位置通常會有一個一鍵返回到頂部

          或者返回到哪里的按鈕,這個按鈕就是利用的 錨點鏈接 功能。

          二、錨點鏈接的語法

          就兩個值:第一個就是錨點下在哪里?第二個就是點在哪里?

          <body>
          
          <!-- 2、跳轉的目標位置:點-->
          
          <a id="test">這里是頂部</a>
          
          <!-- 1、跳轉的按鈕:錨-->
          
          <a href="#test">回到頂部</a>
          
          </body>

          三、錨點的用法實例

          源代碼:↓

          備注:如果手機上看格式錯亂,建議粘貼到電腦版編輯器里觀看。


          主站蜘蛛池模板: 国产丝袜视频一区二区三区| 亚洲线精品一区二区三区影音先锋| 午夜视频一区二区| 日本欧洲视频一区| 本免费AV无码专区一区| 视频一区二区三区在线观看| 精品无码日韩一区二区三区不卡| 上原亚衣一区二区在线观看| 性色AV一区二区三区无码| 亚洲福利一区二区三区| 精品国产一区二区三区久久| 99精品久久精品一区二区| 国产精品污WWW一区二区三区| 国产成人无码aa精品一区| 国模精品视频一区二区三区| 无码一区二区三区AV免费| 亚洲AV无码片一区二区三区| 一区二区亚洲精品精华液| 手机福利视频一区二区| 人妻在线无码一区二区三区| 在线一区二区三区| 精品国产日韩亚洲一区91| 日韩a无吗一区二区三区| 国产在线精品一区在线观看| 加勒比精品久久一区二区三区| 国产精品综合一区二区三区| 国产一区二区三区福利| 亚洲国产成人精品久久久国产成人一区二区三区综 | 亚洲av无码一区二区三区网站| 99久久精品国产高清一区二区| 又硬又粗又大一区二区三区视频| 日产一区日产2区| 久久亚洲一区二区| 精品国产一区二区三区久久久狼| 成人免费观看一区二区| 在线观看国产一区二区三区| 国产福利电影一区二区三区,免费久久久久久久精 | 亚洲天堂一区在线| 无码人妻精一区二区三区| 日本免费精品一区二区三区| 国产一区二区视频在线观看|