最新公告
  • 欢迎您光临袁博客,本站秉承服务宗旨 履行“站长”责任,做国内最专业的站长资源平台!立即加入我们
  • 给WordPress博客添加返回顶部/底部的教程

    今天给大家分享下路途吧返回顶部那块的制作教程,其实也不难,主要是用到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、如有链接无法下载、失效或广告,请联系管理员处理!
    5、本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
    6、联系微信:A2022717!

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

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或 联络我们.。
    你们有qq群吗怎么加入?
    当然有的,如果你是帝国cms、易优cms、和pbootcms系统的爱好者你可以加入我们的QQ千人交流群https://www.932t.com/page-qun.html。

    74 评论

    1. Overall, these findings suggest that empagliflozin may prove to be a preferred diuretic adjuvant over thiazides free samples of priligy Make sure any doctor caring for your newborn baby knows if you used adalimumab while you were pregnant

    2. order fluconazole 200mg generic viagra 50mg generic order sildenafil 50mg pills

    3. buy ranitidine 150mg online cheap order mobic 7.5mg pills order celecoxib 200mg without prescription

    4. buy methotrexate 2.5mg pill order reglan pill order metoclopramide generic

    5. buy triamcinolone 10mg without prescription desloratadine generic buy clarinex 5mg pill

    6. linezolid without prescription ladbrokes uk money slots

    7. molnupiravir 200 mg without prescription cefdinir 300mg ca buy prevacid 15mg without prescription

    8. buspirone 10mg without prescription buspar 5mg tablet ditropan 2.5mg drug

    9. catapres 0.1mg uk buy minocin tiotropium bromide drug

    10. purchase doxycycline pills doxycycline pills buy furosemide 100mg pills

    发表评论

    • 1131会员数(个)
    • 3214资源数(个)
    • 1本周更新(个)
    • 1 今日更新(个)
    • 395稳定运行(天)