给wordpres网站加上返回顶部BackTop按钮

WP技巧  给wordpres网站加上返回顶部BackTop按钮
部分特效需要jQuery的支持,并且版本需要在1.7.2以及更高,如果你的网页中没有添加jQuery库,请加入以下代码。

<script src="//lib.sinaapp.com/js/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

接下来我们添加BackTop显示的代码。(不包括特效,主要代码;可以自行修改)
下列代码添加在自己网页中的footer处即可。
注:请自行修改以下代码,并把图片文件储存在自己的服务器里自行调用。

<style type="text/css">
#backTop {
    background: url("http://i11.tietuku.cn/d4bf0eeb98e30f67.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    bottom: 0;
    cursor: pointer;
    display: none;
    height: 275px;
    margin-bottom: -80px;
    position: fixed;
    right: 0;
    transition: all 0.5s ease 0s;
    width: 120px;
    z-index: 9999;
}
#backTop:hover {
    background: url("http://i11.tietuku.cn/cd64baee111cb3e6.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    margin-bottom: 0;
    transition: all 0.5s ease 0s;
}
#backTop a {
    display: block;
    overflow: hidden;
}
            </style><div id="backTop"><a href="javascript:;"></a></div>

接下来我们添加jQuery特效代码。(建议加至head处)

<script type="text/javascript">
$(function () {
	$("#backTop").hide();
	$(window).scroll(function(){
		if ($(window).scrollTop()>1000){
			$("#backTop").fadeIn(1500);
		}else{
			$("#backTop").fadeOut(1500);
		}
	});
	$("#backTop").click(function(){
		$("body,html").animate({scrollTop:0},1000);
		return false;
	});
});
</script>

以上代码中有显示速度、滑动速度以及显示BackTop的参数,可以自行修改。

代码出自Rin’s Blog

WP技巧

显示WordPress页面查询次数、加载时间和内存占用

2015-10-5 17:33:24

WP技巧

修改wordpress后台登陆地址,修改wp-login.php文件换掉登陆地址

2015-10-29 19:28:00

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索