说实话,我真的觉得这个返回首页的按钮太过招摇了,我感觉它甚至都不能叫做按钮,因为它,太长了。

Yaodo·2023-01-23·83 次阅读
说实话,我真的觉得这个返回首页的按钮太过招摇了,我感觉它甚至都不能叫做按钮,因为它,太长了。

我早就想把它删掉了,奈何我真的不懂代码,网上一搜都是教你怎么添加这个特效的,真是要了老命了,我只想删掉它啊。
今天研究了老半天,终于找到方法了。
找到主题文件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>
找到文件的第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主题的按钮拿来用吧。
后面的步骤完全可以用插件来替代,我写的一团糟,没什么参考意义。
修改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的部分也删除掉,我是不高兴去搞了。