WordPress 中添加代码实现 「返回顶部」 功能

   Updated: 2014-03-13 23:17       WordPress 中添加代码实现 「返回顶部」 功能有11条评论

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

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

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. 以上代码在 Safari 中貌似无效,其他浏览器中均正常。

参考链接:

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

11 comments on “WordPress 中添加代码实现 「返回顶部」 功能

    1. 王小喜 Post author

      这个。。。超出我的知识范围了,我也不晓得
      代码本身我不懂,只晓得几个参数,可能这个代码的兼容性没那么好
      建议你:
      1、搜索一下相关代码的用法,然后尝试修改一下看能不能解决
      2、或者换用插件而不是自己添加代码,一般插件兼容性好一些

      Reply
    1. 王小喜 Post author

      可以的,下面两行代码最后的 0.1 就是控制速度的值,越小越慢
      d.scrollTop-=Math.ceil((d.scrollTop+b.scrollTop)*0.1);
      b.scrollTop-=Math.ceil((d.scrollTop+b.scrollTop)*0.1);

      Reply
      1. 屠夫9441

        感谢您的回复!我添加了代码后使用正常,但是在 W3C CSS 校验器中检查了一下 style.css,提示我这个:
        语法错误 *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))); }
        不过可以正常使用,不知道是怎么回事……

        Reply
        1. 王小喜 Post author

          这个问题我回答不了,你可以谷歌一下嘛
          不过管他呢,能用就 OK 了,毕竟我们的博客网站只是小型的个人网站而已

        2. 屠夫9441

          没有 GOOGLE 出来,貌似 CSS 里的那段写法还挺复杂的,不怎么常见……不过还是谢谢你的回复!说的也是,能用就行了。

  1. antonio

    很爱钻研的同学,赞一个。我是单独做了一个文章列表页,然后将 sidebar 固定住,一来相当于做了个 sitemap,二来就无须回到顶部了。

    Reply
    1. 王小喜 Post author

      你这做法也不错,更简洁明了,不过不适合技术站点,需要来回看上看下的。文章列表我用了插件,按类别和日期、tag 都有。

      Reply

回复 屠夫9441 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注