为你的网站添加一个「回到顶部」

首先声明一下，这个不是我做滴，这个功能是主题自带功能，让后某银看中了他，觉得挺好看的，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 的主题

为你的网站添加一个「回到顶部」