- 盆盆罐罐 - https://penpenguanguan.com -

WordPress 中添加代码实现 “返回顶部” 功能

之前我是使用 WordPress 插件来实现 “返回顶部” 功能,我之前使用 Dynamic To Top [3],当然我们也可以手动添加代码来实现这个功能。

本文介绍的 “返回顶部” 代码很简单和简洁,不使用外部 jQuery,兼容 Chrome 浏览器。代码参照 “在 WordPress 中添加返回顶部的功能 [4]” 这篇文章,根据我自己的博客风格做了很小的改动。

1、在 style.css 文件中添加如下代码:

/* GoTop Start */
#gotop{
	width:38px;
	height:36px;
	position:fixed;
	bottom:70px;
	right:20px;
	top:auto;
	display:block;
	cursor:pointer;
	background: url(lib/top.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)));
}
/* GoTop End */

2、在 footer.php 文件的</body> 语句前添加如下代码:

<!-- 返回顶部 -->
<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>300)?'block':"none"}
	};
	backTop('gotop');
</script>
<!-- 返回顶部 END -->

说明:

  1. 这里是图片版,文字版我还没有去研究。style.css 代码 background 属性即是背景图片地址,我这里把图片放在主题目录下的 lib 目录中。
  2. scrollTop>300 指从顶部向下滚动 300 像素后出现 “返回顶部” 的按钮。
  3. d.scrollTop-=Math.ceil((d.scrollTop+b.scrollTop)*0.1);b.scrollTop-=Math.ceil((d.scrollTop+b.scrollTop)*0.1); 这里的两个 0.1 共同控制向上的滚动速度。目前我的网站均设为 0.05。为什么是两个我理解不了,但可以看参考链接。

  4. 背景图片可以在网上搜索或自己制作,或者参考链接文章中的图片。这个图片很简洁,个人比较喜欢,所以我直接拿来用在我的博客中了。(图片地址 [5]
  5. 以上代码在 Safari 中貌似无效,其他浏览器中均正常。

参考链接:

  1. 在 WordPress 中添加返回顶部的功能 [4]
  2. 解析 document.body 和 document.documentElement 的用法 [6]