给WordPress博客添加返回顶部/底部的教程

本文共4665个字,预计阅读时间需要12分钟 发布时间: 2021-12-19 共41人阅读

今天给大家分享下路途吧返回顶部那块的制作教程,其实也不难,主要是用到html、css和一些jq代码。

效果图如下图所示:

废话不多说,我们开始教程:

首先我们把下面的html代码添加到主题footer.php文件的</body>上面:

<div class=\\\\\\\\\\\\\\\"gotop\\\\\\\\\\\\\\\">
	<a id=\\\\\\\\\\\\\\\"top\\\\\\\\\\\\\\\"><i class=\\\\\\\\\\\\\\\"iconfont icon-arrow-up\\\\\\\\\\\\\\\"></i></a>
	<a href=\\\\\\\\\\\\\\\"<?php echo $gotop[\\\\\\\\\\\\\\\'qq_url\\\\\\\\\\\\\\\']?>\\\\\\\\\\\\\\\" rel=\\\\\\\\\\\\\\\"external nofollow\\\\\\\\\\\\\\\"  rel=\\\\\\\\\\\\\\\'nofollow\\\\\\\\\\\\\\\' class=\\\\\\\\\\\\\\\"uk-display-block b-b\\\\\\\\\\\\\\\"><i class=\\\\\\\\\\\\\\\"iconfont icon-qq\\\\\\\\\\\\\\\"></i></a>
	<a class=\\\\\\\\\\\\\\\"wechat\\\\\\\\\\\\\\\"><i class=\\\\\\\\\\\\\\\"iconfont icon-wechat\\\\\\\\\\\\\\\"></i></a>
	<a href=\\\\\\\\\\\\\\\"https://www.baidu.com/baidu?word=wptoo%E6%95%99%E7%A8%8B%E7%BD%91\\\\\\\\\\\\\\\" rel=\\\\\\\\\\\\\\\"external nofollow\\\\\\\\\\\\\\\"   rel=\\\\\\\\\\\\\\\'nofollow\\\\\\\\\\\\\\\'><i class=\\\\\\\\\\\\\\\"iconfont icon-resonserate-fill\\\\\\\\\\\\\\\"></i></a>
	<a id=\\\\\\\\\\\\\\\"footer\\\\\\\\\\\\\\\"><i class=\\\\\\\\\\\\\\\"iconfont icon-arrow-down\\\\\\\\\\\\\\\"></i></a>
</div>
<div class=\\\\\\\\\\\\\\\"gotop-pop\\\\\\\\\\\\\\\">
	<div class=\\\\\\\\\\\\\\\"gotop-pop-main\\\\\\\\\\\\\\\">
		<div class=\\\\\\\\\\\\\\\"gotop-pop-box uk-overflow-hidden\\\\\\\\\\\\\\\">
			<h3>微信</h3>
			<i class=\\\\\\\\\\\\\\\"iconfont icon-icon-test25 gotop-pop-box-close\\\\\\\\\\\\\\\"></i>
			<img src=\\\\\\\\\\\\\\\"https://www.zhankr.net/wp-content/uploads/2020/02/2020020408254925.jpg\\\\\\\\\\\\\\\" />
		</div>
	</div>
</div>

可以看到在右侧按钮上面是有Icon图标的,所以我们还需要加载一个Icon图标,把下面的一行代码添加到header.php的</head>标签上面,加载Icon样式。

<link rel=\\\\\\\\\\\\\\\"stylesheet\\\\\\\\\\\\\\\" href=\\\\\\\\\\\\\\\"https://at.alicdn.com/t/font_1557485_rig7wtgjqd.css\\\\\\\\\\\\\\\" rel=\\\\\\\\\\\\\\\"external nofollow\\\\\\\\\\\\\\\"  />

Icon图标

如果你的博客有Icon图标样式,可以不用添加上面的代码,用自己的图标

然后我们添加js代码,将下面代码添加到footer.php文件的</body>上面:

<script>
	$(window).scroll(function() {
		var scroll_top = $(window).scrollTop();
		if(scroll_top >= 200) {
			$(\\\\\\\\\\\\\\\".gotop\\\\\\\\\\\\\\\").fadeIn();
		} else {
			$(\\\\\\\\\\\\\\\".gotop\\\\\\\\\\\\\\\").fadeOut();
		}
	});
	$(\\\\\\\\\\\\\\\"#top\\\\\\\\\\\\\\\").click(function() {
		$(\\\\\\\\\\\\\\\"html,body\\\\\\\\\\\\\\\").finish().animate({
			\\\\\\\\\\\\\\\"scrollTop\\\\\\\\\\\\\\\": $(\\\\\\\\\\\\\\\".top\\\\\\\\\\\\\\\").offset().top
		}, 500);
	});
	$(\\\\\\\\\\\\\\\"#footer\\\\\\\\\\\\\\\").click(function() {
		$(\\\\\\\\\\\\\\\"html,body\\\\\\\\\\\\\\\").finish().animate({
			\\\\\\\\\\\\\\\"scrollTop\\\\\\\\\\\\\\\": $(\\\\\\\\\\\\\\\".bottom\\\\\\\\\\\\\\\").offset().top
		}, 500);
	});
	$(\\\\\\\\\\\\\\\'.wechat\\\\\\\\\\\\\\\').click(function() {
		$(\\\\\\\\\\\\\\\'.gotop-pop\\\\\\\\\\\\\\\').toggle();
	});
	$(\\\\\\\\\\\\\\\'.gotop-pop-box-close\\\\\\\\\\\\\\\').click(function() {
		$(\\\\\\\\\\\\\\\'.gotop-pop\\\\\\\\\\\\\\\').hide()
	});
</script>

以上代码依赖jquery,请确保你的博客已经加载jquery文件。

最后就是css样式了, 将下面代码添加到header.php文件的</head>上面,也可以添加到主题的样式文件内,一般是style.css这个文件。(为了方便二次修改,css样式代码没有压缩,代码比较长,可以直接点击复制)

/*
* ------------------------------------------------------------------------------
* 返回顶部样式
* ------------------------------------------------------------------------------
*/

.gotop {
	position: fixed;
	bottom: 0;
	right: 0;
	margin: 30px;
	display: none;
	overflow: hidden;
	border-radius: 4px;
	border: 1px solid #eee;
}

.gotop a {
	display: block;
	padding: 10px 13px;
	background-color: #fff;
	transition: all .3s ease;
	color: #888;
	background: #fff;
	border-bottom: 1px solid #eee;
	text-decoration: none;
	cursor: pointer;
}

.gotop a:hover {
	color: #fff;
	background: #2c63ff;
	box-shadow: -3px 2px 10px -2px #2c63ff;
	transform: translateY(-3px);
	border: 0
}

.gotop a:last-child {
	border: 0
}

.gotop i {
	font-size: 18px
}

.gotop-pop {
	position: fixed;
	width: 100%;
	height: 100%;
	background: #00000030;
	display: none;
	top: 0;
	transition: all .3s;
}

.gotop-pop-main {
	position: relative;
	max-width: 600px;
	margin: 10% auto;
	padding: 15px;
	animation: fadeinB .6s infinite;
	-moz-animation: fadeinB .6s infinite;
	/* Firefox */
	-webkit-animation: fadeinB .6s infinite;
	/* Safari and Chrome */
	-o-animation: fadeinB 1s infinite;
	/* Opera */
	animation-iteration-count: 1;
	-webkit-animation-iteration-count: 1;
	/* Safari 和 Chrome */
}

.gotop-pop-box {
	background: #fff;
	padding: 20px;
	text-align: center;
}

.gotop-pop-box h3 {
	text-align: center;
}
.gotop-pop-box-close {
	position: absolute;
	right: 0;
	top: 0;
	font-size: 24px;
	color: #aaa;
}
@keyframes fadeinB {
	0% {
		transform: translateY(20px);
		opacity: 0;
		filter: Alpha(opacity=0);
	}
	100% {
		transform: translateY(0px);
		opacity: 1;
		filter: Alpha(opacity=1);
	}
}

.fadeinB {
	animation: fadeinB .6s infinite;
	-moz-animation: fadeinB .6s infinite;
	/* Firefox */
	-webkit-animation: fadeinB .6s infinite;
	/* Safari and Chrome */
	-o-animation: fadeinB 1s infinite;
	/* Opera */
	animation-iteration-count: 1;
	-webkit-animation-iteration-count: 1;
	/* Safari 和 Chrome */
}

教程到此就结束了,完成以上步骤后,去网站前端看看效果吧,如果有疑问可以加入我们的WordPress交流群。

WordPress建站交流群:8424781

 

本站声明:
1. 本站所有资源来源于网络,分享目的仅供大家学习和交流! 2. 不得使用于非法商业用途,不得违反国家法律。否则后果自负! 3. 本站提供的资源,都不包含技术服务请大家谅解! 4. 如有链接无法下载、失效或广告,请联系站长处理!

再次声明:如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。


HI模板网 » 给WordPress博客添加返回顶部/底部的教程

常见问题FAQ

本站下载资源解压密码是什么?
本站所有资源解压密码均为www.hmoban.com、www.huziy.com或者www.92luntan.com
免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
开通VIP 享更多特权,为了您的账户安全HI模板网建议您使用QQ登录!