0
(0)

有好几个学员问我学建站网右下角的回顶部和微信展示怎么实现的，这里学建站网给搭建分享下这个特效实现的方法。

首先声明，代码并非学建站网原创，而是在懒人图库下载的免费特效，然后根据学建站网的网站风格进行改造的，以下是详细的过程，整个实现过程可再次被复制，如果你觉得这样的效果不错，也可以跟着做，只需要按照教程复制其中的代码即可，不需要懂代码。

1、下载绿色版代码附件包：
链接地址：http://pan.baidu.com/share/link?shareid=433452&uk=403909634
密码:ccat
2、下载后解压，里面的文件如下图：
回顶部压缩包文件
文件功能作用介绍：
CSS文件：里面附带特效实现所必须的CSS样式；
images文件：特效所使用的图片；
js文件：特效所必须要加载的jquery.js和js.js文件；
index.html：特效调用文件，里面有调用特效的代码。
特别提醒#：下载后可以直接右击选择浏览器打开index.html文件查看特效效果如下图。
特效演示

材料准备好后，下一步就是需要把这些代码分别融合到自己的网站中，用来实现这个特效，以后遇到其他的一些特效，只要能够下载到代码，实现过程是一样的。融合过程：
第一步、上传图片和js文件到主题文件中；
比如学建站是把images文件夹中的图片上传到了学建站主题的images文件夹，把jquery.js和js.js文件上传到主题的js文件夹里面了；
第二步、复制CSS文件lrtk.css中的代码到主题的style.css的底部，并修改其中的背景图片路径../images/icon.png为images/icon.png；
第三步、调用！
这步是关键，我们需要正确的调用上传的文件，不然会导致效果整合失败。
1、打开wordpress主题顶部文件header.php，并在标签上使用以下代码调用js文件；

  1. <!– 第一个js调用 –>  
  2. <script type=“text/javascript” src=“<?php bloginfo(‘template_directory’); ?>/js/jquery.js”></script>  
  3. <!– 第二个js调用 –>  
  4. <script type=“text/javascript” src=“<?php bloginfo(‘template_directory’); ?>/js/js.js”></script>  

特别提醒#：如果你的主题中已经加载了jquery.js，则只需要放置第二个js文件调用即可。
2、在index.html文件中，复制调用代码到wordpress主题footer.php文件标签上面：

  1. <!– 代码开始 –>  
  2. <div id=“code”></div>  
  3. <div id=“code_img”></div>  
  4. <a id=“gotop” href=“javascript:void(0)”></a>  
  5. <!– 代码结束 –>  

修改后如下图：
调用代码放置
如果不出意外，到这一步，刷新你的网站应该在右下角就可以看到特效了，当然可能位置稍有偏差，你还需要根据自己的网站做下调整，稍有些CSS基础的同学都可以实现的，这里就不再啰嗦了。

声明：本站分享的WordPress主题/插件均遵循 GPLv2 许可协议（免费开源），相关介绍资料仅供学习参考，实际版本可能会因版本迭代或开发者调整而产生变化，如程序中涉及有第三方原创图像、设计模板、远程服务等内容，应获得作者授权后方可使用。本站不提供该程序/软件的产品授权与技术服务，亦不收取相关费用。