# Link

過去:

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

```
<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; //要水平偏移的距離 向右為正\
}<br>

#### HTML部分

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

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