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

  • 文章介绍
  • 评价建议
  • 今天给大家分享下站壳网返回顶部那块的制作教程,其实也不难,主要是用到html、css和一些jq代码。

    效果图如下图所示:

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

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

    首先我们把下面的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交流群。

    发表评论

    免责声明 云瓜网,一个精品商业网站源码分享平台 www.cloudgua.com
    1. 本站所有资源来源于用户上传和网络,均不允许转载,如有侵权请邮件联系站长!
    2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
    3. 如发现会员转载本站资源文章,本站有权封禁会员账号!
    4. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
    5. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
    6. 如有链接无法下载、失效或广告,请联系管理员处理!
    7. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
    8. 如遇到加密压缩包,默认解压密码为"www.cloudgua.com",如遇到无法解压的请联系管理员!
    9.本站客服:1261159
    开通VIP 享更多特权,建议使用 QQ 登录