Sakura主题首页的下拉小箭头

发布于 2022-02-24  276 次阅读


本文最后更新于2022年5月1日,已超过 30 天没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

直接开工

首先找到Sakura主题文件包下的 layouts 中的 imgbox.php 文件,在最顶部添加如下代码

<!-- 首页下拉箭头 -->
<div class="headertop-down faa-float animated" onclick="headertop_down()"><span><i class="fa fa-chevron-down" aria-hidden="true"></i></span></div>

代码中的 fa fa-chevron-down 图案样式可自行修改为其他 图案地址

接着修改主题文件中的 style.css 文件(记得在WP后台主题设置-CDN-开启本地调用主题js、css文件) 或者 直接在 主题设置-自定义CSS样式 中添加如下代码

/* 首页下拉箭头 */
.headertop-bar::after {
    content: '';
    width: 150%;
    height: 4.375rem;
    background: #fff;
    left: -25%;
    bottom: -2.875rem;
    border-radius: 100%;
    position: absolute;
    z-index: 4;
}
 
.headertop-down {
    position: absolute;
    bottom: 50px;
    left: 50%;
    cursor: pointer;
    z-index: 7;
}
@media (max-width: 860px) {
    .headertop-down {
        display: none
    }
}
 
.headertop-down i {
    font-size: 28px;
    color: #fff;
    -ms-transform: scale(1.5,1); /* IE 9 */
    -webkit-transform: scale(1.5,1); /* Safari */
    transform: scale(1.5,1); /* Standard syntax */
}

最后打开主题文件 JS 目录里的 sakura-app.js 文件,在底下添加函数

/* 首页下拉箭头 */
function headertop_down() {
    var coverOffset = $('#content').offset().top;
    $('html,body').animate({
        scrollTop: coverOffset
    },
    600);
}