说实话,我真的觉得这个返回首页的按钮太过招摇了,我感觉它甚至都不能叫做按钮,因为它,太长了。
我早就想把它删掉了,奈何我真的不懂代码,网上一搜都是教你怎么添加这个特效的,真是要了老命了,我只想删掉它啊。
今天研究了老半天,终于找到方法了。
1 修改footer.php
找到主题文件footer.php的第67行,这个空链接的标签就是那个回到顶部的按钮。如果你直接删掉(或者注释掉)的话,因为js中还有相应的代码,一定是会在控制台报错的,而且切换主题的那个按钮也会跟着消失掉(因为写在了同一个方法中)。
<a class="cd-top faa-float animated "></a> <button id="moblieGoTop" title="Go to top"><i class="fa fa-chevron-up" aria-hidden="true"></i></button> <button id="moblieDarkLight"><i class="fa fa-moon-o" aria-hidden="true"></i></button>
把第67行这个链接换一个class
比如换成
<a class="cd-top1"></a>
2 修改sakura-app.js
找到文件的第1820行
var cwidth = document.body.clientWidth, cheight = window.innerHeight, pc_to_top = document.querySelector(".cd-top"), mb_to_top = document.querySelector("#moblieGoTop"),
把这个selector改成对应的css,比如上一步中设置的cd-top1
其实完成这一步之后,那个悬挂猫已经消失了,其他的样式也没有受到影响。但是没有了返回顶部的按钮,看着还是怪怪的,所以我还是把以前的siren主题的按钮拿来用吧。
3 添加其他的返回顶部的按钮
后面的步骤完全可以用插件来替代,我写的一团糟,没什么参考意义。
修改sakura-app.js,从1825行开始
$(window).scroll(function() { if (cwidth <= 860) { if ($(this).scrollTop() > 20) { mb_to_top.style.transform = "scale(1)"; mb_dark_light.style.transform = "scale(1)"; } else { mb_to_top.style.transform = "scale(0)"; mb_dark_light.style.transform = "scale(0)"; } } else { if ($(this).scrollTop() > 100) { pc_to_top.classList.add("cd-is-visible"); changeskin.style.bottom = "0"; pc_to_top.style.bottom = null; } else { changeskin.style.bottom = "-999px"; pc_to_top.style.bottom = "-999px"; pc_to_top.classList.remove("cd-fade-out", "cd-is-visible"); } if ($(this).scrollTop() > 1200) { pc_to_top.classList.add("cd-fade-out"); } } });
修改style.css,在最后添加几行
.cd-top1 { position: fixed; right: 1%; bottom: -999px; z-index: 99999; width: 50px; height: 60px; background: url(images/gotop.png) no-repeat center; background-size: contain; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; cursor: pointer; opacity: 0; } .cd-top1.cd-is-visible { opacity: .7; bottom: 5%; } .cd-top1.cd-fade-out { opacity: .85; } .cd-top1:hover { opacity: 1; } @media screen and (max-width: 860px) { .cd-top1 { height: 40px; width: 50px; } }
把gotop.png放到主题根目录的images文件夹。
应该就可以了吧。
Comments | 1 条评论
博主 傲娇的小基基
有强迫症的人可以去对应的js里把绘制css的部分也删除掉,我是不高兴去搞了。