也想出現在這里?聯系我們

分享一款我常用到的wordpress返回頂部的功能

2013.06.05 wordpress教程
  • 文章介紹
  • 升級版本
  • 評價&建議

我們用wordpress來做站都會遇到頁面內容比較長的時候,上下拖拉頁面實在麻煩,這時候就需要一個wordpress返回頂部的功能了。網上相關教程也一大堆,又是js腳本啊,又是JQuery啊什么的,太麻煩了,而今天分享的是沒有js調用的,直接加個樣式,再在底部加個代碼就完事了,下面將此教程分享給大家!

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

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

其中,bottom和right屬性可以控制按鈕圖片在右下角的位置,background屬性可以修改返回頂部的圖片。

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. 添加返回頂部按鈕圖片 可以選擇自己喜歡的

toptop02arollicontop01

將圖片保存到主題文件夾下的images里,圖片名叫gotop.gif

有用4
  • 2013.06.05初次和大家見面了!

已擁有6人對該主題的建議

  1. 不行啊,站長,我的加以上代碼還是不顯示。

    2015-07-06 上午 7:32 [回復]
  2. 0樓
    fanfam55555:

    今天來了,才學!謝謝教程!!!

    2014-11-26 下午 3:00 [回復]
  3. 0樓
    啊遠:

    我是菜鳥啊 能教我嗎 師傅

    2013-08-09 上午 3:54 [回復]
  4. 0樓
    大餅:

    永遠是發表于52分鐘前 好詭異

    2013-06-05 上午 2:25 [回復]
    • 因為裝了緩存插件。。。所以時間被訂格了。。。哈哈

      2013-06-05 上午 9:55 [回復]
  5. 0樓
    110:

    求本站主題分享,不是分享嗎,版權歸你啊 。。

    2013-06-04 下午 5:10 [回復]

發表評論

還能輸入240個字

Hi, 歡迎加入Wordpress技術交流群,帶你裝逼帶你飛!

我要入群
也想出現在這里?聯系我們
wordpress加速

我來推薦一個更牛逼的給你看看?

  • 猛戳我吧
夫妇野外交换HD高清版,免费A片在线观看,亚洲精品国产自在现线,中国老妇人60OLDMANTV