转载自 老蘑菇 &  Sakura主题首页的下拉小箭头 Sakura主题美化第五弹

喜欢本文章还请去原作者博客里浏览留言，在此再次感谢 老蘑菇 大佬!

效果预览

1.修改 imgbox.php 文件

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

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

PS: 这部分的fa-chevron-down为下拉图标部分，可以查看Font Awesome 中文网找到图标名称替换成你喜欢的图标

2.添加CSS

接着修改主题文件中的 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: 5;
}
@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 */
}

3. 修改sakura-app.js 文件

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

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