JavaScript自動生成博文目錄導航/TOP按鈕
博客園頁面添加返回頂部TOP按鈕
進入網頁管理->設置
- 在"頁面定制CSS代碼"中添加如下css樣式，當然你可以改為自己喜歡的樣式
此處可以將背景色background-color改為:
background:url(http://images.cnblogs.com/cnblogs_com/gitwow/1393973/o_o_o_toTop.png) no-repeat -70px top;
- 在"頁腳Html代碼"中添加如下代碼，可以將文字改為圖片
- 此處
<a href="#top">改為:#_labelTop,我的博客園好像沒有#top - #1文字TOP必須留著,才能跳轉到錨點
#_labelTop,而且也不知道怎麽將文字改為圖片??
- 點擊保存按鈕
這樣就在自己的頁面添加了回到頂部的Top按鈕
利用jQuery制作帶動畫版本的跳轉
- 首先需要在頂部添加如下html元素：
其中a標簽指向錨點top，可以在頂部放置一個<a name="top"></a>的錨點，這樣在瀏覽器不支持js時也可以實現返回頂部的效果了。#1
- css樣式
要想讓返回頂部的圖片顯示在右側，還需要一些css樣式，如下(頁面定制CSS代碼)：
#back-to-top {
background:transparent url(http://images.cnblogs.com/cnblogs_com/gitwow/1393973/o_o_o_toTop.png) no-repeat -70px top;
width:57px;
height:57px;
overflow:hidden;
position:fixed;
right:0px;
bottom:0px;
cursor:pointer;
}
頁腳Html代碼
//回到頁頂的代碼(JS)-------------------------------------------------------
JavaScript自動生成博文目錄導航
參考:JavaScript自動生成博文目錄導航 - 孤傲蒼狼 - 博客園
1.JavaScript實現方式:
實現原理：首先通過調用DOM方法，判斷出瀏覽器滾動條（scroll bar）的當前位置，記為currentPos；然後計算出目標標題（target title）的距頁面頂端的距離，記為finalPos；最後通過一定的算法實現平滑過度。
2.源代碼
下面是這個JS工具的相關源代碼：
2.1 js代碼<u>**頁首Html代碼**</u>修改如下:(#2)
2.2. CSS樣式代碼<u>**頁面定制CSS代碼**</u>
/*生成博客目錄的CSS*/
#sideBar{
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
text-align:left;
position:fixed;/*將div的位置固定到距離top:50px，right:0px的位置，這樣div就會處在最右邊的位置，距離頂部50px*/
top:50px;
right:0px;
width: auto;
height: auto;
}
#sideBarTab{
float:left;
width:30px;
border:1px solid #e5e5e5;
border-right:none;
text-align:center;
background:#ffffff;
}
#sideBarContents{
float:left;
overflow:auto;
overflow-x:hidden;!important;
width:200px;
min-height:108px;
max-height:460px;
border:1px solid #e5e5e5;
border-right:none;
background:#ffffff;
}
#sideBarContents dl{
margin:0;
padding:0;
}
#sideBarContents dt{
margin-top:5px;
margin-left:5px;
}
#sideBarContents dd, dt {
cursor: pointer;
}
#sideBarContents dd:hover, dt:hover {
color:#A7995A;
}
#2由於該css與原有的css部分同名沖突,故修改如下:
sideBar
--->uprightsideBar
sideBarTab--->uprightsideBarTab
sideBarContents--->uprightsideBarContents
為博客園添加目錄的配置總結
錨點
一般的Markdown編輯器如果我們想實現頁內跳轉可以這樣做：
定義錨點：<span id="des">destination</span>
定義跳轉：[jump] (#des)
現在以下方法也不能使用了。所以簡書的小夥伴們，放棄吧
但這套做法在簡書的Markdown上就行不通了，錨點定義部分會原樣輸出。
簡書上利用a標簽也能實現跳轉，但是會打開新的頁面，這就難以接受了。
在簡書上實現頁面內的錨點跳轉方法：
定義跳轉：<a href="#label">點擊跳轉</a>
中間是長長的一段，此處省略一萬字.....
定義錨點：<a id="label">跳到這裏來</a>
【錨點簡介】
錨點是網頁制作中超級鏈接的一種，又叫命名錨記。命名錨記像一個迅速定位器一樣是一種頁面內的超級鏈接，運用相當普遍。
英文名：anchor
使用命名錨記可以在文檔中設置標記，這些標記通常放在文檔的特定主題處或頂部。然後可以創建到這些命名錨記的鏈接，這些鏈接可快速將訪問者帶到指定位置。
創建到命名錨記的鏈接的過程分為兩步。首先，創建命名錨記，然後創建到該命名錨記的鏈接。
【錨點用法】
- 建立一個跳轉的連接：
[說明文字](#jump) - 標記要跳轉到的位置
<span id = "jump">跳轉到這裏：</span>
dl,dt,dd標簽的使用
dl,dt,dd標簽的使用 - 都市煙火 - 博客園
定義和用法:
<dl>標簽定義了定義列表（definition list）。
<dl>標簽用於結合<dt>（定義列表中的項目）和<dd>（描述列表中的項目）。
dl:定義列表應該是definition list的縮寫
dt:定義標題,所以應該是definition title的縮寫
dd:描述用的,所以應該是definition description的縮寫
JavaScript自動生成博文目錄導航/TOP按鈕