一、錨點鏈接的概念

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

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

二、錨點鏈接的語法

就兩個值：第一個就是錨點下在哪裡？第二個就是點在哪裡？

<body>

<!-- 2、跳轉的目標位置：點-->

<a id="test">這裡是頂部</a>

<!-- 1、跳轉的按鈕：錨-->

<a href="#test">回到頂部</a>

</body>

三、錨點的用法實例

源代碼：↓

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

<body>
<!-- 3、下點：就是點擊後要跳轉到這裡來-->
<a id="dingbu">這裡是頂部</a>
<br>
<!-- 1、偽造兩屏的網頁內容--->
<h7>
  <!--外部超鏈接-->
  <a href="https://www.baidu.com">百度</a><br>
  <!--內部超鏈接-->
  <a href="test.html">內部超鏈接</a><br>
  <!--下載超鏈接-->
  <a href="image/test.png">下載超鏈接</a><br>
</h7>
<h6>
  <!--外部超鏈接-->
  <a href="https://www.baidu.com">百度</a><br>
  <!--內部超鏈接-->
  <a href="test.html">內部超鏈接</a><br>
  <!--下載超鏈接-->
  <a href="image/test.png">下載超鏈接</a><br>
</h6>
<h5>
  <!--外部超鏈接-->
  <a href="https://www.baidu.com">百度</a><br>
  <!--內部超鏈接-->
  <a href="test.html">內部超鏈接</a><br>
  <!--下載超鏈接-->
  <a href="image/test.png">下載超鏈接</a><br>
</h5>
<h4>
  <!--外部超鏈接-->
  <a href="https://www.baidu.com">百度</a><br>
  <!--內部超鏈接-->
  <a href="test.html">內部超鏈接</a><br>
  <!--下載超鏈接-->
  <a href="image/test.png">下載超鏈接</a><br>
</h4>
<h3>
  <!--外部超鏈接-->
  <a href="https://www.baidu.com">百度</a><br>
  <!--內部超鏈接-->
  <a href="test.html">內部超鏈接</a><br>
  <!--下載超鏈接-->
  <a href="image/test.png">下載超鏈接</a><br>
</h3>
<h2>
  <!--外部超鏈接-->
  <a href="https://www.baidu.com">百度</a><br>
  <!--內部超鏈接-->
  <a href="test.html">內部超鏈接</a><br>
  <!--下載超鏈接-->
  <a href="image/test.png">下載超鏈接</a><br>
</h2>
<h1>
  <!--外部超鏈接-->
  <a href="https://www.baidu.com">百度</a><br>
  <!--內部超鏈接-->
  <a href="test.html">內部超鏈接</a><br>
  <!--下載超鏈接-->
  <a href="image/test.png">下載超鏈接</a><br>
</h1>
<!-- 2、先下錨：就是按鈕放哪裡-->
<a href="#dingbu">回到頂部</a>
</body>

原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/232861.html