- 首先找到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>
- 接着修改主题文件中的
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 */
}
- 最后打开主题文件
JS
目录里的 sakura-app.js
文件,在底下添加函数
/* 首页下拉箭头 */
function headertop_down() {
var coverOffset = $('#content').offset().top;
$('html,body').animate({
scrollTop: coverOffset
},
600);
}
效果预览
The best things come when you least expect them to.
Comments | NOTHING