為你的網站添加一個「回到頂部」

首先聲明一下，這個不是我做滴，這個功能是主題自帶功能，讓後某銀看中了他，覺得挺好看的，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 的主題

為你的網站添加一個「回到頂部」