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

我早就想把它删掉了,奈何我真的不懂代码,网上一搜都是教你怎么添加这个特效的,真是要了老命了,我只想删掉它啊。

今天研究了老半天,终于找到方法了。

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文件夹。

应该就可以了吧。