最新公告
  • 欢迎您光临轻资源,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 给WordPress博客添加返回顶部/底部的教程

    正文概述 admin   2020-07-4   739

    今天给大家分享下返回顶部那块的制作教程,其实也不难,主要是用到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 */
    }
    

    教程到此就结束了,完成以上步骤后,去网站前端看看效果吧。

    发表回复

    发表回复

    • 53会员总数(位)
    • 76资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 1095稳定运行(天)