WordPress 添加顶部底部滑动按钮的方法

炮炮兵 · 发表于 2013-3-15 16:39:32

第一步：
header.php代码中<head>...</head>之间加入下面代码

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/includes/options/jquery.min.js" ></script><script type="text/javascript" src="<?php bloginfo('template_url'); ?>/includes/options/custom.js"></script>

复制代码
上面JS的路径可以根据你的实际情况来修改
然后在尾部加上这句

<?php include('includes/box/scroll.php'); ?>

复制代码
这个文件的路径也可以自己改
第二步：
主题的style.css文件中加入下面代码

/** 滚屏 **/

ul.scroll{width:15px;float:right;display:block;position:fixed;top:40%;right:0;_position:absolute;_margin-top:300px;_top:expression(eval(document.documentElement.scrollTop));z-index:6;}

.sct{background:url(images/scroll.png);}

.scb{background:url(images/scroll.png) 0 40px;}

.scc{background:url(images/scroll.png) 0 80px;}

.scroll_t,.scroll_c,.scroll_b{width:80px;height:40px;line-height:40px;text-align:center;cursor:pointer;border-radius:5px 0 0 5px;box-shadow:0 2px 2px 1px #666;}

.scroll_t{background:#d03f42;}

.scroll_b{background:#383838;}

.scroll_c{background:#467ebd;}

ul.scroll li{position:relative;height:40px;float:right;}

ul.scroll li a{display:block;color:#fff;}

ul.scroll li div{display:none;position:absolute;top:0;right:0;}

复制代码
第三步：
上传附件中的文件到对应的目录

第四步：
效果图

QQ截图20130313203322.jpg (9.55 KB, 下载次数: 1)
第五：附件。附件下载地址：http://www.fwqlt.com/thread-11223-1-2.html
scroll.rar JS文件.rar

		自动登录	找回密码
密码			注册

WordPress 添加顶部底部滑动按钮的方法

相关帖子

浏览过的版块