- 资源介绍
- 更新记录
- 安装教程
上面:
微信
可以看到在右侧按钮上面是有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-28解决WordPress升级时提示正在执行例行维护,请一分钟后回来_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-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-28WordPress如何在子分类获取父分类的链接_52弹弹堂-5466shop.cn
2020-08-28WordPress获取文章所属分类名称、分类ID、分类别名_52弹弹堂-5466shop.cn
2020-08-28RIPRO主题6.x开启(鼠标划过文章网格加载动效)后不能点击,如何解决?教程来了!_52弹弹堂-5466shop.cn
2020-08-28WordPres获取作者信息/文章/ID等相关函数代码_52弹弹堂-5466shop.cn
2020-08-28WordPress SEO优化 如何自动为文章添加标签链接增加站点内链_52弹弹堂-5466shop.cn
2020-08-28WordPress小技巧:移除菜单导航中自带的多余类名_52弹弹堂-5466shop.cn
2020-08-28WordPress如何在后台查看分类ID_52弹弹堂-5466shop.cn
2020-08-28