温馨提醒

亲爱的游客,你的浏览器太旧啦.都啥年代了.为了你的安全,为了你的体验,为更好的浏览本页, 赶紧更新一把吧.....本博客不支持ie8以下浏览器,如果你使用的是ie浏览器,请您更新到ie8或以上版本.

推荐使用谷歌浏览器(chrome)或火狐浏览器(Firefox),点击下方按键进行安装

码农部落

  ——好记性,不如烂博客!

wordpress 添加返回顶部

页面比较长的时候,添加一个回返顶部的功能,是个不错的做法.下面直接上代码:

css代码:

/*返回顶部*/
.backToTop {
 display: none;
 width: 18px;
 line-height: 1.2;
 padding: 5px 0;
 background-color: #000;
 color: #fff;
 font-size: 12px;
 text-align: center;
 position: fixed;
 _position: absolute;
 right: 10px;
 bottom: 100px;
 _bottom: "auto";
 cursor: pointer;
 opacity: .6;
 filter: Alpha(opacity=60);
}

js代码:

$(document).ready(function(){
 var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body"))
 .text($backToTopTxt).attr("title", $backToTopTxt).click(function() {
 $("html, body").animate({ scrollTop: 0 }, 120);
 }), $backToTopFun = function() {
 var st = $(document).scrollTop(), winh = $(window).height();
 (st > 0)? $backToTopEle.show(): $backToTopEle.hide(); 
 //IE6下的定位
 if (!window.XMLHttpRequest) {
 $backToTopEle.css("top", st + winh - 166); 
 }
 };
 $(window).bind("scroll", $backToTopFun);
 $(function() { $backToTopFun(); });
});

把以上css和js代码,添加到主题对应的文件就行了.