feat: Add the icon that prompt to scroll down in the header of site

_config.yml

@@ -101,6 +101,10 @@ header:
     enable: false
     # Opacity of mask (value: 0 ~ 1).
     opacity: 0.5
+  # The icon that prompt to scroll down.
+  scroll_down_icon:
+    enable: false
+    animation: true
 
 # Creative Commons 4.0 International License.
 creative_commons:

layout/_partials/config.pug

@@ -38,6 +38,13 @@
     });
   }
 
+  var header = "undefined";
+  if (theme.header) {
+    header = JSON.stringify({
+      scrollDownIcon: theme.header.scroll_down_icon.enable,
+    });
+  }
+
   var gallery_waterfall = "undefined";
   if (theme.gallery_waterfall.enable) {
     gallery_waterfall = JSON.stringify(theme.gallery_waterfall);
@@ -88,6 +95,7 @@ script.
     algolia: !{ algolia },
     fontawesome: !{ fontawesome },
     sidebar: !{ sidebar },
+    header: !{ header },
     back2top: !{ back2top },
     reward: !{ theme.reward.enable },
     fancybox: !{ theme.fancybox },

layout/_partials/header/header.pug

@@ -22,3 +22,7 @@ div.header-info(style=`${
   div.header-info-inner
     div.header-info-title= config.title
     div.header-info-subtitle= config.subtitle
+
+  if theme.header.scroll_down_icon && theme.header.scroll_down_icon.enable
+    div.header-info-scrolldown
+      i.fa.fa-angle-down.header-info-scrolldown__icon

layout/_third-party/pjax.pug

@@ -97,6 +97,7 @@ script.
 
       Stun.utils.pjaxReloadBoot();
       Stun.utils.pjaxReloadScroll();
+      Stun.utils.pjaxReloadHeader();
       Stun.utils.pjaxReloadSidebar();
     }, false);
   }, false);

source/css/_common/components/header/index.styl

@@ -180,5 +180,40 @@ if (hexo-config('header.nav_height') && match('%', hexo-config('header.nav_heigh
       font-weight: $font-weight-normal;
       color: $white-light;
     }
+
+    if (hexo-config('header.scroll_down_icon') && hexo-config('header.scroll_down_icon.enable')) {
+      &-scrolldown {
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        z-index: $z-index2;
+        transform: translate3d(-50%, -.5rem, 0);
+        cursor: pointer;
+
+        if (hexo-config('header.scroll_down_icon.animation')) {
+          animation: arrowUpDown 1.5s infinite;
+
+          @keyframes arrowUpDown {
+            0%,
+            100% {
+              opacity: .8;
+              transform: translate3d(-50%, -.5rem, 0);
+            }
+
+            50% {
+              opacity: .4;
+              transform: translate3d(-50%, -1.5rem, 0);
+            }
+          }
+        }
+
+        &__icon {
+          font-size: 2rem;
+          font-weight: $font-weight-bolder;
+          text-align: center;
+          color: #fff;
+        }
+      }
+    }
   }
 }

source/js/header.js

@@ -98,4 +98,17 @@ $(document).ready(function () {
 
     $submenu.length && $submenu.css('display', 'none');
   });
+
+  Stun.utils.pjaxReloadHeader = function () {
+    if (CONFIG.header.scrollDownIcon) {
+      $('.header-info-scrolldown').on('click', function () {
+        $('#container').velocity('scroll', {
+          offset: $('#header').height()
+        });
+      });
+    }
+  };
+
+  // Initializaiton
+  Stun.utils.pjaxReloadHeader();
 });