当前位置:首页 > 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的主题



标签:
上一篇: 下一篇:

16 条评论

评论加载中...
  1. 12楼
    来自天朝的朋友 谷歌浏览器 Windows 7
    森林之家  

    好漂亮啊

    2016年3月13日 19:58 评论
  2. 11楼
    来自天朝的朋友 火狐浏览器 Windows XP
    seo  

    [good][给力]

    2015年6月18日 15:16 评论

发表评论

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

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