# 下拉小箭头

# 美化步骤

# global.js

1. 打开目录： themes\shoka\source\js\_app

2. 找到global.js 中的#search ,在它下面var一个函数

3. 找不到就Ctrl+F 搜索 #search

   var siteSearch = $('#search');
   var angleBtn = $('#angle');  //新增这个下拉小箭头

# pjax.js

1. 还在 themes\shoka\source\js\_app 目录下
2. 找打 pjax.js 中第一个 toolBtn ,在它下面仿照格式新增下列代码
3. 找不到就Ctrl+F 搜索 toolBtn 第一个出现的就是

  if(!toolBtn) {
    toolBtn = siteHeader.createChild('div', {
      id: 'tool',
      innerHTML: '<div class="item player"></div><div class="item contents"><i class="ic i-list-ol"></i></div><div class="item chat"><i class="ic i-comments"></i></div><div class="item back-to-top"><i class="ic i-arrow-up"></i><span>0%</span></div>'
    });
  }
  
  //新增下拉小箭头如下
  if(!angleBtn) {
    angleBtn = siteHeader.createChild('div', {
      id: 'angle',
      innerHTML: '<span><i class="ic i-angle-down" aria-hidden="true"></i></span>'
    });
 }

3. 添加完后在第三个 toolBtn 位置下面添加下列代码

  angleBtn.addEventListener('click',headertopdown);//下拉小箭头监听

# sidebar.js

1. 还在 themes\shoka\source\js\_app 目录下
2. 找到 sidebar.js 中的 comments
3. 找不到就Ctrl+F 搜索 comments
4. 仿照它写一段代码，如下：

const goToCommentHandle = function () {
  pageScroll($('#comments'));
}

//新增下拉小箭头
const headertopdown = function () {
  pageScroll($('#main'));
}

# header.styl

1. 打开目录：themes\shoka\source\css\_common\outline\header
2. 找到 header.styl ，就在里面的 #header 下面继续新增下列代码：

#header {
  margin: 0 auto;
  position: relative;
  width: 100%;
  height: 100vh;
  text-shadow: 0rem .2rem .3rem alpha(#000, .5);
  color: var(--header-text-color);

  a:hover {
    color: currentColor;
  }
}

//新增下拉小箭头
#angle {
    position: absolute;
    bottom: 10vh;
    left: 50%;
    cursor: pointer;
    z-index: 5;
    transform: translateX(-50%);
}


@media (max-width: 860px) {
#angle {
        bottom: 8vh;
    }
}

#angle i {
    font-size: 45px;
    color: #fff;
    @extend .up-down;
}

# 注意事项

在最后一步css样式添加时，有可能会遇到比如云层特效偏移到顶部或者底部，再加一个angle如图所示，或者自行调整。最主要就是position: absolute没生效，你可以再加一个块，或者强制调整它的位置，绝对定位

有可能你直接成功哈哈哈哈

LIKE THAT:

# END

✔️大功告成，如果你配置有问题可以评论，我会帮助你