博客園頁面添加返回頂部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的縮寫

轉載于:https://www.cnblogs.com/gitwow/p/10393166.html

總結

以上是生活随笔為你收集整理的JavaScript自动生成博文目录导航/TOP按钮的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。