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

[ wordpress教程   // 2014-12-22  ]
为WordPress添加轻量级”返回顶部按钮”代码
137

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

为了改善用户体验,笔者也决定在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.scrollTop > 100) ? 'block': "none"
}
};
backTop('gotop'); < /script>/

<!-- 返回顶部END -->

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

100个返回顶部按钮 网页TOP小图标素材

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

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

用途:html返回顶部按钮

解压密码:www.wugongqi.cn

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