2006-12-13

幾個網頁跳轉的技巧

透過簡單的幾行 Javascript,就可以讓你的 Blog 文章在瀏覽版面的時候有更多彈性,這裡整理幾種方法:

1. 上一頁 (Previous page)

<a href="javascript:history.back()">Previous page</a>

也可以用這種:

<a href="javascript:history.go(-1)">Previous page</a>

裡面的數字 "-1" 如果改成 "-2", "-3" 之類的,就代表是要回到前兩頁、前三頁~

2. 下一頁 (Next page)

<a href="javascript:history.forward()">Next page</a>

同上,一樣可以改成:

<a href="javascript:history.go(1)">Next page</a>

3. 跳回頁首 (Top of page)

<a href='javascript:scroll(0,0)'>Top of Page</a>

就程式上來看的意思。要求瀏覽器自動往上捲,捲到絕對座標是 (0, 0) 頁首的位置

4. 跳回文首 (Top of post)

這個比較複雜,因為程式本身如果沒有處理的話,並沒辦法知道每篇文章的文首在哪裡。一般來說,每個文首的地方應該要有識別的標籤,像是 Post-ID,然後透過 Javascript 去找到該物件,讓捲軸捲到文首去,語法大致如下:

<a onclick='"javascript:document.getElementById(\"post-ID\").scrollIntoView(true);"' href='javascript:void(0);'>Top of Post</a>

中間那個 Post-ID 要自己搞定。如果是要用到 Blogger.com 上面,要改成這樣:

<a expr:onclick='"javascript:document.getElementById(\"post-" + data:post.id + "\").scrollIntoView(true);"' href='javascript:void(0);'>Top of Post</a>

只要把以上代碼塞到文末,或是頁尾,在瀏覽文章的時候頁面的跳轉就可以很方便了。(當然,前提是瀏覽器要打開對 Javascript 的支援)

參考文章:
網站建置百寶箱:上頁下頁
Blogger beta:"Top of Page"、"Top of post"

回應: 0

張貼留言

歡迎留言或發表意見,不過要理性不做人身攻擊。匿名的朋友得到回應的速度會比較慢喔~
發問相關的禮貌和規矩請先參考這篇文章,不當留言、和本文無關的回應可能會被直接刪除無視喔!