最新公告
  • 欢迎您光临5466,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!进入交流论坛
  • 给WordPress博客添加返回顶部/底部的教程_52弹弹堂-5466shop.cn

    给WordPress博客添加返回顶部/底部的教程_52弹弹堂-5466shop.cn 最后编辑:2020-08-28

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

    效果图如下图所示:

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

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

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

    
    

    微信

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

    
    

    Icon图标

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

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

    
    

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

    最后就是css样式了, 将下面代码添加到header.php文件的上面,也可以添加到主题的样式文件内,一般是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. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!7345947@qq.com 2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励! 3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负! 4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
    5466资源网 » 给WordPress博客添加返回顶部/底部的教程_52弹弹堂-5466shop.cn
    • 2020-08-28Hi,初次和大家见面了,请多关照!

    发表回复

    • 383会员总数(位)
    • 41554资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 1164稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情