zoukankan      html  css  js  c++  java
  • wordpress返回顶部的功能

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

    #gotop{
        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)));
    }

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

    <!-- 返回顶部 -->
    <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 -->

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

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

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

  • 相关阅读:
    django xadmin 集成DjangoUeditor富文本编辑器
    docker学习笔记
    02-创建 TLS CA证书及密钥
    01-集群环境及组件介绍
    使用Filebeat和Logstash集中归档日志
    FastDFS分布式存储实战
    [转]JVM内存模型
    jcmd
    jstack Dump 日志文件中的线程状态
    cpu占用过高排查
  • 原文地址:https://www.cnblogs.com/yangcong/p/3614677.html
Copyright © 2011-2022 走看看