WordPress添加返回顶部小火箭

偶看介绍的Wordpress添加返回顶部小火箭是通过JQuery配合CSS来实现,可以适用于任何Wordpress模板,而不单单只适合萧涵主题。

一、下载返回顶部小火箭压缩包:rocket小火箭素材,里面有两个文件btop.js和rocket_up.png,均放置到主题文件夹下的 images 目录,例如:/wp-content/themes/xiaohan3/images/

二、打开萧涵主题文件夹下的/wp-content/themes/xiaohan3/footer.php,在文件结尾处添加

<div id="scrollTop" >
    <div class="level-2"></div>
    <div class="level-3"></div>
</div>
<script language="javascript" type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.6.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="/wp-content/themes/xiaohan3/images/btop.js"></script>

三、打开萧涵主题文件夹下的/wp-content/themes/xiaohan3/style.css,在文件结尾处添加

/*top*/
#scrollTop{cursor:pointer;display:block;height:180px;overflow:hidden;position:fixed;right:-42px;top:80%;width:149px;z-index:11;margin:-124px 0 0;padding:0}
#scrollTop,#scrollTop .level-2{background:url(images/rocket_up.png) no-repeat 0 0;}
#scrollTop div{left:0;overflow:hidden;position:absolute;top:0;width:149px;margin:0;padding:0}
#scrollTop:hover{background-position:-149px 0;}
#scrollTop .level-2{background-position:-149px 0;display:none;height:180px;opacity:0;z-index:1}
#scrollTop .level-3{background:none;cursor:pointer;display:block;height:180px;z-index:2}

这样就完成了Wordpress添加返回顶部小火箭,具体效果看下图,也可以查看偶看博客的右侧。

返回顶部小火箭

《WordPress添加返回顶部小火箭》有10个想法

  1. 我的www.yusheng8.com为什么按这个方法添加了没有反映,也不显示,请博主帮忙看一下。万分感谢

  2. 你好,我的小火箭 为什么在360浏览器上显示的是在页面最下面,而且居中显示的?不过在谷歌浏览器上就显示正常,这是不兼容问题吗?

      1. 你的网站在我的360浏览器上完全正常,但是我的网站http://xcen.cn 就不正常。。。你可以看一下,这太邪门了。。。我都是按照你的教程做的啊。。。求解

发表评论