当前位置:首页 > 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. 14楼
    Serbia Opera Mini Linux
    site link  

    671133 481785Youll notice several contrasting points from New york Weight reduction eating strategy and every one one may possibly be helpful. The initial point will probably be authentic relinquishing on this excessive. lose weight 623253

    2018年8月18日 03:27 评论
  2. 13楼
    United Kingdom 火狐浏览器 Ubuntu Linux
    UK Chat  

    432035 535830Aw, this was a quite good post. In concept I wish to put in writing like this moreover ?taking time and precise effort to make an excellent write-up?but what can I say?I procrastinate alot and definitely not appear to get 1 thing done. 198287

    2018年8月15日 21:04 评论
  3. 12楼
    来自天朝的朋友 谷歌浏览器 Windows 7
    森林之家  

    好漂亮啊

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

    [good][给力]

    2015年6月18日 15:16 评论

发表评论

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

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