当前位置:首页 > WordPress教程代码·功能 > 正文

为你的网站添加一个“回到顶部”

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



标签:
上一篇: 下一篇:

18 条评论

评论加载中...
  1. 10楼
    来自天朝的朋友 未知浏览器 Unknow Os
    seo  

    2015年4月9日 16:34 评论
  2. 9楼
    来自天朝的朋友 未知浏览器 Unknow Os
    站长工具  

    知道怎么做了

    2015年2月14日 08:44 评论
  3. 8楼
    这家伙可能用了岛国的代理 未知浏览器 Unknow Os
    极国  

    这些代码一个也不会用

    2015年2月13日 20:13 评论
  4. 7楼
    来自天朝的朋友 未知浏览器 Unknow Os
    松果  

    松果前来报道

    2014年11月17日 18:04 评论
  5. 6楼
    来自天朝的朋友 未知浏览器 Unknow Os
    中国历史  

    万分感谢,搞定了

    2014年11月8日 18:36 评论
  6. 5楼
    Hong Kong 未知浏览器 Unknow Os
    李明  

    不错的功能,谢谢分享!

    2014年11月8日 15:47 评论
  7. 4楼
    来自天朝的朋友 未知浏览器 Unknow Os
    章正明  

    好吧

    2014年11月8日 14:39 评论
  8. 地板
    来自天朝的朋友 未知浏览器 Unknow Os
    章正明  

    再来一次

    2014年11月8日 14:38 评论
  9. 板凳
    来自天朝的朋友 未知浏览器 Unknow Os
    章正明  

    额,没反应

    2014年11月8日 14:38 评论
  10. 沙发
    来自天朝的朋友 未知浏览器 Unknow Os
    章正明  

    回复一下

    2014年11月8日 14:37 评论

发表评论

不理你。不要啊!吃饭。吃惊。吃西瓜。飞吻!恭喜!Hi纠结!膜拜!OK抛媚眼。泡泡糖。抛钱。忍!生闷气!调皮。偷看。委屈。献花。疑问?抓狂!

小提示:Ctrl+Enter快速提交助您一臂之力~
加载中……