- 首先找到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);
}
效果预览

Never give up your dreams.
Comments | 7 条评论
tips一下JS函数,heardertop_down应该是herdertop-down
@Tom 说错了
大佬,我的下拉箭头为什么要登录后台之后才能显示啊..
清理了援存再等一會才能顯示,學習了!感謝那麼多好文章美化!
我按照你的方法去安裝,圖案出來了,但是按了沒反應是什麼問題?
@KILLUA 有没有把函数添加进JS;有没有后台CDN开启走本地JS,CSS;是否用了缓存插件,刷新下缓存;是不是用了Autoptimize这个插件,关掉试试;是否用了CDN,清除下缓存;我用原版v3.3.7Sakura主题没有发现问题