首页 > 其他 > 详细

wordpress返回顶部的功能

时间:2014-03-21 04:06:39      阅读:237      评论:0      收藏:0      [点我收藏+]

1. 在style.css中添加如下代码

bubuko.com,布布扣
#gotop{
    width:38px;
    height:36px;
    position:fixed;
    bottom:25px;
    right:10px;
    top:auto;
    display:block;
    cursor:pointer;
    background: url(images/gotop.gif) no-repeat
}

*html #gotop{
    position:absolute;
    bottom:auto; top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}
bubuko.com,布布扣

2. 在footer.php中添加如下代码

bubuko.com,布布扣
<!-- 返回顶部 -->
<div style="display: none;" id="gotop"></div>
<script type=text/javascript>
    backTop=function (btnId){
        var btn=document.getElementById(btnId);
        var d=document.documentElement;
        var b=document.body;
        window.onscroll=set;
        btn.onclick=function (){
            btn.style.display="none";
            window.onscroll=null;
            this.timer=setInterval(function(){
                d.scrollTop-=Math.ceil((d.scrollTop+b.scrollTop)*0.1);
                b.scrollTop-=Math.ceil((d.scrollTop+b.scrollTop)*0.1);
                if((d.scrollTop+b.scrollTop)==0) clearInterval(btn.timer,window.onscroll=set);
            },10);
        };
        function set(){btn.style.display=(d.scrollTop+b.scrollTop>100)?block:"none"}
    };
    backTop(gotop);
</script>
<!-- 返回顶部END -->
bubuko.com,布布扣

3. 添加返回顶部按钮图片 可以选择自己喜欢的

将图片保存到主题文件夹下的images里,图片名叫gotop.gif

http://devework.com/wordpress-top-bottom-comment2.html

wordpress返回顶部的功能,布布扣,bubuko.com

wordpress返回顶部的功能

原文:http://www.cnblogs.com/yangcong/p/3614677.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!