- 资源介绍
- 更新记录
- 安装教程
上面:
微信
可以看到在右侧按钮上面是有Icon图标的,所以我们还需要加载一个Icon图标,把下面的一行代码添加到header.php的标签上面,加载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
wordpress禁止指定省份访问_52弹弹堂-5466shop.cn
2020-08-28wordpress主题css适配屏幕尺寸大小自适应教程_52弹弹堂-5466shop.cn
2020-08-28WordPress自动检测并显示文章是否被百度收录_52弹弹堂-5466shop.cn
2020-08-28WordPress文章随机显示缩略图的实现方法_52弹弹堂-5466shop.cn
2020-08-28WordPress主题在线一键生成网站underscores_52弹弹堂-5466shop.cn
2020-08-28WordPress如何在父分类获取所有子分类/二级分类_52弹弹堂-5466shop.cn
2020-08-28WordPress技巧:获取统计文章内图片数量_52弹弹堂-5466shop.cn
2020-08-28WordPress获取文章所属分类名称、分类ID、分类别名_52弹弹堂-5466shop.cn
2020-08-28WordPress给文章外链地址添加nofollow_52弹弹堂-5466shop.cn
2020-08-28WordPress PostType(自定义文章类型)功能介绍_52弹弹堂-5466shop.cn
2020-08-28WordPress如何获取全部文章总浏览数量_52弹弹堂-5466shop.cn
2020-08-28WordPress如何禁止古腾堡编辑器加载谷歌字体_52弹弹堂-5466shop.cn
2020-08-28WordPress如何添加多个自定义菜单_52弹弹堂-5466shop.cn
2020-08-28WordPress教程:在后台文章列表添加作者筛选选项_52弹弹堂-5466shop.cn
2020-08-28wordpress登录界面样式优化_52弹弹堂-5466shop.cn
2020-08-28解决WordPress官网无法访问 429 Too Many Requests_52弹弹堂-5466shop.cn
2020-08-28WordPress升级更新方法详解_52弹弹堂-5466shop.cn
2020-08-28WordPress如何在删除文章时自动删除文章内的图片附件_52弹弹堂-5466shop.cn
2020-08-28WordPress主题常用模板名称、常用标签和函数大全_52弹弹堂-5466shop.cn
2020-08-28WordPress如何调用自定义分类文章数量_52弹弹堂-5466shop.cn
2020-08-28