為你的網站新增一個「回到頂部」

首先宣告一下，這個不是我做滴，這個功能是主題自帶功能，讓後某銀看中了他，覺得挺好看的，so 將其挖了出來。使用方法很簡單，上傳一個圖片以及修改一個 CSS 並且修改一下 header 就好了，感覺好簡單，好了下面上程式碼！快氣死了，輸了半天的東西，電腦一斷網，媽的草稿沒存成，東西還都丟掉了昨晚就該發的，可是現在才來的電！！食言了！請見諒！

可以自動旋轉呦

第一步

下載上面所示的圖片並上傳至主題 images 目錄下圖片地址：http://ihuan.me/wp-content/themes/CKoo/images/gototop.png 你們上面所示的圖片是沒法直接另存為的，使用上面的絕對地址

第二步

在主題下 style.css 中加入以下程式碼

#roll_top{position:relative;width:50px;height:50px;cursor:pointer}
#roll_top{background:url(images/gototop.png) no-repeat}
#roll_top:hover{background:url(images/gototop.png) no-repeat bottom;transform:rotate(-3600deg);transition-duration:2s;-webkit-transform:rotate(-3600deg);-webkit-transition-property:-webkit-transform;-webkit-transition-duration:2s;-moz-transform:rotate(-3600deg);-moz-transition-property:-webkit-transform;-moz-transition-duration:2s;}
#roll{position:fixed;top:auto;right:10px;bottom:5px;display:block;}

第三步

在主題目錄下 header.php 中新增以下內容

第四步

在主題 header 處放置一下程式碼可以直接打包為 js 檔案

好吧，其實我承認我很懶，懶得仔細弄，電腦坑爹害的東西都丟了，沒辦法，就是懶得再弄了，家裡斷電筆記本還受得了，可是路由……然後電腦沒電了，你懂的，所以放到底部吧，最後載入~~ 嗯，這個還帶著緩慢回到底部的功能，有喜歡耍的可以去試試再加一個圖示而已，或者使用上下兩種的隨身附帶其他功能（本站未用）去頂部，去底部，和評論 3 種如要底部和評論請在 js 第三段中新增以下呼叫分別為 ct（評論）fall（底部）

jQuery('#ct').click(function(){$('html,body').animate({scrollTop:$('#comments').offset().top}, 800);});
jQuery('#fall').click(function(){$('html,body').animate({scrollTop:$('.footer').offset().top}, 800);});

然後重新整理以下看一看是不是有變化了，使用七牛等 CDN 加速的請清除快取再試哦有空再改一下吧！！請時刻注意哦~ 以後再加入去底部和評論！

特殊一步

有些主題沒有載入 jQuery，沒有的請載入例如微歷史君的 Twenty Twelve 主題除錯的時候在本地其他主題都好好的，咋這個木法用，然後左思右想，一步點選檢視原始碼，才發現 😥 一下程式碼只用於未載入 jQuery 的主題

為你的網站新增一個「回到頂部」