如何製作相同網頁的順暢超連結

在我們的部落格裡經常會用到一些超聯結，尤其是教學文，可是這些連結一般都只能連結到外面的網站，或是不同的網頁。可是我們卻經常看到一些Q&A(問答)的網頁可以點擊問題超連結，然後跳到同一個網頁上回答問題的位置，而不是跳到別的網頁，究竟這樣的效果是如何做到的呢？

本篇文章就來介紹一下這種相同網頁超連結的 Html 語法吧！其實這種語法叫做「書籤」，早期網路剛發達的時候，這樣的語法很流行，想要作到這樣效果其實一點都不困難，但你可能需要稍稍有點「Html程式碼」的心裡準備。

如果你還不是很清楚我上面所說的效果，可以點擊下面的按鈕，參考我另一個部落格的文章示範。

如果你稍微留意一下上面的範例，你有沒有覺得它跟別人的網站有一點點不一樣？它的畫面似乎比較順暢，當你按下網頁內的超連結時，你有沒有發現到網頁是整個往下滾動呈現的，而不是直接跳到指定的位置，想要達到這樣的效果，你就必須要利用到 iQuery 程式碼的幫忙。

現在我們先來看看如何使用 Html 程式碼來達到相同網頁的超連結吧！

下面程式碼總共有四個網頁的內部連結點，一般我們稱之為「錨」，而<a name=”…”>就是設定錨的指定位置，而<a>則是錨的結束指令；另外在name後面的雙引號裡面的是錨的名稱，你可以使用中文或英文都可以。假設你想要在網頁內連結到「段落1」的錨點時，你必須要製作一段超連結然後將其連結網址設定為「#段落1」相對網址就可以了，這時候建議不要設定成開啟新視窗，範例：點擊連結到本文段落1。

假設當你想要從其他的網頁連結到這個網頁的「段落1」錨點時，你就必須要將其超連結設定成「網頁網址.html#段落1」絕對網址。當然你也可以將相同網頁的內部連結用這種絕對網址的格式來設定，只是通常你在寫一篇文章時基本上還不知道這個網頁的網址名稱，所以這個時候使用相對位址會比較適合。

<a name=”段落1”></a>
段落1……
<a name=”段落2”></a>
段落2……
<a name=”段落3”></a>
段落3……
<a name=”段落4”></a>
段落4……

段落1

段落2

段落3

---

至於使用 iQuery 程式碼來達到畫面捲動的效果，就必須要更改部落格後台的 Html 設定，這裡僅以 Blogspot 為設定的對象，Wordpress 可以參考文章最底下的原文，其他的部落格平台就只能說抱歉了。

1. 首先，你要進入 Blogspot 的後台，然後進入【修改HTML】，如果你還不知道如何進入 Blogspot 後台請先參考這篇文章：Blogger template (板型)修改注意事項。

2. 找到</head>，在其前面加入下列程式碼。你可以按<Ctrl>+<F>來快速搜尋。

<!--start jquery from http://www.spiceupyourblog.com-->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>

<script src='http://spiceupyourblogextras.googlecode.com/files/jquery.localscroll-1.2.7-min.js' type='text/javascript'/>
< script src='http://spiceupyourblogextras.googlecode.com/files/jquery.scrollTo-1.4.2-min.js' type='text/javascript'/>
< script type='text/javascript'>
$(document).ready(function() {
$(&#39;#linknav&#39;).localScroll({duration:800});
});
< /script>
< !--end jquery from http://www.spiceupyourblog.com—>

3. 在你希望有畫面捲動效果的網頁中增加程式碼 <div id=”linknav>…</div> 於所有相同網頁連結碼的頭尾。

<div id="linknav">

<a href=”#段落1”>段落1</a>…
<a href=”#段落2”>段落2</a>…
<a href=”#段落3”>段落3</a>…
<a href=”#段落4”>段落4</a>…

</div>

如此一來你的網頁就可以擁有捲動的相同網頁連結囉！

本文章參考：http://www.spiceupyourblog.com/2011/05/linking-within-pages-jquery-scroll.html

---

相關閱讀：
回》 Blogger 部落格技巧總整理