Link

過去:

參考資料:(http://frostjasmine.pixnet.net/blog/post/2610855-html-%E8%AA%9E%E6%B3%95---%E9%8C%A8%E9%BB%9E%28anchor%29)

<a name="magic">錨點所在位置</a>

<a href="#magic">此連結會跳到錨點magic</a>

現在:

參考資料:(https://www.pigo.idv.tw/archives/2615)

參考資料:w3school (https://www.w3schools.com/tags/tag_a.asp)

參考資料:w3school(https://www.w3schools.com/html/html_links.asp)

HTML5 <a> 已經不支援 name 這個屬性。

可以指向其他元素的id。

直接使用

<h2 id="magic">錨點所在位置</h2>

<a href="#magic">此連結會跳到錨點magic</a>

錨點偏移

狀況:網頁的上方有head，直接接錨點會被檔到，所以利用偏移去避免擋住的狀況。

第一個範例 較詳細

參考資料:(https://blog.csdn.net/tian361zyc/article/details/74331589)

CSS部分

<style>
*{
margin:0;
padding:0;
}
.target{
position:relative;
}
.placeholder {
//position:absolute; //請謹慎服用
display:block;
width:1px;
height:40px; //要跟上方偏離的高度
top:-40px; //要跟上方偏離的高度
}
</style>

HTML部分

<a href="#1">GO TO 1</a>

<a name="1" class="target">
<span class="placeholder"></span>
get the 1
</a>

第二個範例 較簡單達成

CSS部分

.magic{ position: relative; top: -110px; //要垂直偏移的距離 向上為負 left: 20px; //要水平偏移的距離 向右為正 }

HTML部分

<span id="magic">錨點在此</span>

<a href="#magic">前往錨點</a>