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

  • 相关阅读:
    docker常用命令
    redis常用命令
    Spring boot redis自增编号控制 踩坑
    docker 安装 nginx
    Linux常用命令记录
    leetcode-120. 三角形最小路径和
    leetcode-229.求众数(二)
    leetcode-169.求众数
    冒泡排序学习笔记
    快速排序学习笔记
  • 原文地址:https://www.cnblogs.com/yangcong/p/3614677.html
Copyright © 2011-2022 走看看