在松嶺等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站建設(shè)、做網(wǎng)站 網(wǎng)站設(shè)計(jì)制作按需策劃,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站建設(shè),營銷型網(wǎng)站,外貿(mào)網(wǎng)站制作,松嶺網(wǎng)站建設(shè)費(fèi)用合理。

圖片來源：Inspiring Wallpapers

就像上圖中的超人一樣，你的讀者也想要一飛沖天的感覺。

沒錯(cuò)，你的網(wǎng)站需要一個(gè) “回到頂部” 的按鈕。

每當(dāng)你的文章寫得很長，或者評論蓋了好幾十層樓的時(shí)候，用戶想要回到頂部就成了一件折磨的事情，鼠標(biāo)滾輪滾得要燒起來有木有？即便是直接拖動滾動條，多少還是有點(diǎn)不痛快。正因如此，有時(shí)你覺得礙手礙腳的一個(gè)小按鈕，此時(shí)卻顯得那么貼心。

我知道對很多人來說，上面都是廢話。好的，廢話少說，講正經(jīng)的。這篇文章是跟大家分享一下我自己寫的一個(gè)超簡單的 “回到頂部” 按鈕——就是右下角那個(gè)箭頭。

不嫌棄它簡陋的話，歡迎右鍵另存為：完整帶注釋版/壓縮版（文件全部是 UTF-8 編碼，如果瀏覽器默認(rèn) GBK 編碼，你直接打開可能會看到亂碼）。在網(wǎng)站的模板里引用這個(gè)文件，網(wǎng)站的每一個(gè)頁面就都有 “回到頂部” 按鈕了。

更多精彩文章，請?jiān)L問作者博客-胡作菲為

簡單說下制作過程

默認(rèn)狀態(tài)的箭頭

鼠標(biāo)移上去之后的箭頭

兩者區(qū)別只在顏色——倒數(shù)第二行polyline的style里面的stroke屬性。

為了節(jié)省 HTTP 請求，這么小而簡單的 SVG 圖形，我決定把它轉(zhuǎn)換成 dataURI。 Google 了一下，果然有現(xiàn)成的工具。于是，上面的兩個(gè)圖標(biāo)分別被轉(zhuǎn)換成了下面的兩串字符。

// 默認(rèn)狀態(tài)下的箭頭
"data:p_w_picpath/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICdodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQnPjxzdmcgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTAgNTAiIHdpZHRoPSI1MHB4IiBoZWlnaHQ9IjUwcHgiIHg9IjBweCIgeT0iMHB4IiBpZD0iTGF5ZXJfMSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTAgNTAiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwb2x5bGluZSBwb2ludHM9IjAsMjUgMjUsNSA1MCwyNSIgc3R5bGU9ImZpbGw6dHJhbnNwYXJlbnQ7c3Ryb2tlOmJsYWNrO3N0cm9rZS13aWR0aDozOyIvPjwvc3ZnPg=="
// 鼠標(biāo)移上去之后的箭頭
"data:p_w_picpath/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICdodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQnPjxzdmcgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTAgNTAiIHdpZHRoPSI1MHB4IiBoZWlnaHQ9IjUwcHgiIHg9IjBweCIgeT0iMHB4IiBpZD0iTGF5ZXJfMSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTAgNTAiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwb2x5bGluZSBwb2ludHM9IjAsMjUgMjUsNSA1MCwyNSIgc3R5bGU9ImZpbGw6dHJhbnNwYXJlbnQ7c3Ryb2tlOiM5OTk7c3Ryb2tlLXdpZHRoOjM7Ii8+PC9zdmc+"

接下來那段比較枯燥，給大家插播一張南京雞鳴寺的照片。

圖片來源：自己以前拿OPPO手機(jī)拍的……

更多精彩文章，請?jiān)L問作者博客-胡作菲為

3. JavaScript：把箭頭放到合適的位置，在合適的時(shí)候出現(xiàn)

2013.10.23上午更新：IE8和Firefox里不能顯示的問題已修復(fù)，雖然IE8以下的瀏覽器里面很丑。。。修改后的代碼有點(diǎn)長，就不貼在文章里了，有興趣的朋友可以點(diǎn)此查看，或者右鍵另存到本地。代碼里有很詳細(xì)的注釋。

這里要插一句：通常是很不推薦在 JavaScript 里面設(shè)置、修改元素的樣式的，這里我這樣做是因?yàn)椴幌朐倭硗鈱懸粋€(gè) CSS 文件，又要多一個(gè) HTTP 請求，讓這個(gè)超簡單的東西變復(fù)雜。

2013.10.23下午更新：你可以選擇是否平滑滾動，默認(rèn)是平滑的。喜歡擺弄代碼的朋友，可以對 backToTop.js（或 backToTop.min.js，取決于你引用的是哪一個(gè)）末尾的 backToTop() 做如下設(shè)置：

backToTop({

backToTop({
  // 不想要平滑的滾動，就像下面這樣設(shè)置為 false
  smooth: false,
  // 滾動的時(shí)長，以毫秒為單位
  time: 300
});

最后

backToTop.js

在改進(jìn)代碼的時(shí)候，下面幾篇文章給了我很大幫助：

• 火狐、谷歌、IE關(guān)于document.body.scrollTop和document.documentElement.scrollTop 以及值為0的問題

• Detect IE

• smoothscroll

我知道肯定有大大在嘲諷我：“這么簡單的玩意兒也拿出來說?！?/p>

是的，我很享受這個(gè)分享的過程，并且會更享受之后的交流和討論，哈哈！

更多精彩文章，請?jiān)L問作者博客-胡作菲為