2011年6月22日 星期三

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

https://blogger-script-study.blogspot.com/2011/06/page-link.html?m=0

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

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

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

如果你稍微留意一下上面的範例,你有沒有覺得它跟別人的網站有一點點不一樣?它的畫面似乎比較順暢,當你按下網頁內的超連結時,你有沒有發現到網頁是整個往下滾動呈現的,而不是直接跳到指定的位置,想要達到這樣的效果,你就必須要利用到 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 部落格技巧總整理

3 則留言:

Niko 提到...

還滿有趣的小設定,回家改改看,感謝!!

Unknown 提到...

非常感謝您,正好初學在找方法!幫助很大!

Travel around Taiwan 提到...

請問加入anchor後跳到compose模式下,超連結會被自動修改成以下這種樣式:
Tag
請問該如何解決?