开工

  1. 首先找到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>
  2. 接着修改主题文件中的 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. 最后打开主题文件 JS 目录里的 sakura-app.js 文件,在底下添加函数
    /* 首页下拉箭头 */
    function headertop_down() {
    var coverOffset = $('#content').offset().top;
    $('html,body').animate({
    scrollTop: coverOffset
    },
    600);
    }

    完工


转自 https://m1314.cn/267.html