首先声明一下,这个不是我做滴,这个功能是主题自带功能,让后某银看中了他,觉得挺好看的,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主题 调试的时候在本地 其他主题都好好的,咋这个木法用,然后左思右想,一步点击查看源码,才发现 :cry: 一下代码只用于未加载jQuery的主题
赞
2015年4月9日 16:34知道怎么做了
2015年2月14日 08:44这些代码一个也不会用
2015年2月13日 20:13按照上面说的,放置一下就好了
2015年2月14日 13:00在主题header处是哪啊
2015年2月16日 12:19松果前来报道
2014年11月17日 18:04万分感谢,搞定了
2014年11月8日 18:36你可以修改下CSS调整下位置 话说一样的主题怎么在你呢效果不一样呢
2014年11月8日 19:20位置我有调整了。
2014年11月8日 19:33不错的功能,谢谢分享!
2014年11月8日 15:47好吧
2014年11月8日 14:39再来一次
2014年11月8日 14:38额,没反应
2014年11月8日 14:38回复一下
2014年11月8日 14:37