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

之前我是使用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 人 对 ”WordPress中添加代码实现“返回顶部”功能” 进行了评论

  1. Pangolin说道:

    请问 chrome浏览器不管用,但IE没问题可能是什么原因呢

    [Reply]

    小喜 Reply:

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

    [Reply]

  2. 屠夫9441说道:

    请问您这个代码可以控制滚动速度吗?谢谢!

    [Reply]

    小喜 Reply:

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

    [Reply]

    屠夫9441 Reply:

    感谢您的回复!我添加了代码后使用正常,但是在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]

    小喜 Reply:

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

    屠夫9441 Reply:

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

  3. antonio说道:

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

    [Reply]

    小喜 Reply:

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

    [Reply]

    antonio Reply:

    文章列表你都用插件?你现在一共用了多少插件啊?我用了6个

    [Reply]

    小喜 Reply:

    6个够少的啊,我都将近30个,该精简精简下了

对本文发表评论





7 + 8 = ?

注意:
1、请勿单纯发表顶啊、打酱油之类无任何意义的评论,否则将被视为spam!谢谢合作!
2、但欢迎你留下对本文的看法或技术上的任何疑问,我会及时回复你。