为WordPress添加轻量级”返回顶部按钮”代码

有很多网友反映免费软件之家博客没有返回顶部按钮，这对阅读比较长的页面时需要返回顶部比较麻烦，用户体验非常不好。

为了改善用户体验，笔者也决定在WordPress增加返回顶部按钮，笔者分享一个比较快捷的实现滚动到网站顶部的方法，代码十分轻巧，也容易添加。适用于wordpress及其他网站程序，方便有这方面需要的博主。

返回顶部按钮代码实现方法：

方法1：（本站使用的代码）

将以下返回顶部js代码扔进你的js文件中，也可以保存为js单独加载：

; (function(e) { e.scrollUp = function(t) { var n = { scrollName: scrollUp, topDistance: 300, topSpeed: 300, animation: fade, animationInSpeed: 200, animationOutSpeed: 200, scrollText: , scrollImg: false, activeOverlay: false }; var r = e.extend({}, n, t), i = # + r.scrollName; e(a/, { id: r.scrollName, href: #top, title: r.scrollText }).appendTo(body); if (!r.scrollImg) { e(i).text(r.scrollText) } e(i).css({ display: none, position: fixed, z-index: 2147483647 }); if (r.activeOverlay) { e(body).append(div id=' + r.scrollName + -active'/div); e(i + -active).css({ position: absolute, top: r.topDistance + px, width: 100%, border-top: 1px dotted+ r.activeOverlay, z-index: 2147483647 }) } e(window).scroll(function() { switch (r.animation) { case fade: e(e(window).scrollTop()r.topDistance ? e(i).fadeIn(r.animationInSpeed) : e(i).fadeOut(r.animationOutSpeed)); break; case slide: e(e(window).scrollTop()r.topDistance ? e(i).slideDown(r.animationInSpeed) : e(i).slideUp(r.animationOutSpeed)); break; default: e(e(window).scrollTop()r.topDistance ? e(i).show(0) : e(i).hide(0)) } }); e(i).click(function(t) { e(html, body).animate({ scrollTop: 0 }, r.topSpeed); t.preventDefault() }) } })(jQuery);

再将以下css扔进你的css样式中：

#scrollUp { bottom: 25px; right: 25px; height: 56px; width: 56px; background: url(images/gototop.png) no-repeat; }

上面样式中用到的图片，需要你自己网上搜索 回到顶部 图片然后保存为gototop.png即可。

调用： 在footer.php中添加以下代码（加在body内）：

script $(function () { $.scrollUp(); }); /script

当然为了代码简洁，你也可以把上面的js代码放到第一段的js代码中，具体效果可以看奇芳阁博客添加的返回顶部按钮后的效果，返回按钮会随着页面下滑而下滑，读者可以点击返回按钮轻松回到网页顶部。

方法2：

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.scrollTop100) ? 'block': none

}

};

backTop('gotop');/script/

!-- 返回顶部END --

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

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

返回顶部按钮图标下载地址：

用途：html返回顶部按钮

解压密码：www.wugongqi.cn

下载 html返回顶部按钮图标 | 来自@奇芳阁