WordPress 添加顶部底部滑动按钮的方法
第一步: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;}
复制代码
第三步:
上传附件中的文件到对应的目录
第四步:
效果图
第五:附件。附件下载地址:http://www.fwqlt.com/thread-11223-1-2.html
scroll.rar JS文件.rar
页:
[1]