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

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]
查看完整版本: WordPress 添加顶部底部滑动按钮的方法