Install elevator.js

I'm just a big kid, really!

layouts/partials/footer.html

@@ -1,11 +1,17 @@
 <footer class="p-5 {{ if eq .IsHome false }}mt-5{{ end }}">
   <div class="container">
     <div class="row">
-      <div class="col-sm-6">
+      <div class="col-sm-4">
         <p>{{ partial "copyright.html" . }}</p>
         <p></p>
       </div>
-      <div class="col-sm-6">
+      <div class="col-sm-4 text-center px-5">
+        <p>
+          <a id="scroll-top" class="float-left">To top</a>
+          <a id="scroll-elevator" class="float-right">To top, in <i>style</i></a>
+        </p>
+      </div>
+      <div class="col-sm-4">
         <h3 class="text-right">
           {{ range .Site.Data.social.footer_accounts }}
           {{ $account := index $.Site.Data.social.accounts . }}

package-lock.json

@@ -3295,6 +3295,11 @@
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.299.tgz",
       "integrity": "sha512-aH3lKMQFPuNk4w7W3hQDqnjfYKJQLzbp5Adn6xgTz5547kKSGOmAU7cQWxH953L4ntZL4HsZ8XWqfcMTvTcEMw=="
     },
+    "elevator.js": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/elevator.js/-/elevator.js-1.0.1.tgz",
+      "integrity": "sha512-3+jUQIrUxDGjhF7cyrxi+NcqaDkYhQ+Y2UfVqozYMLxAY1i9l2ZjLWzPlFMFc4nx3SPYf9EPHEn1zUqpIWlXng=="
+    },
     "elliptic": {
       "version": "6.5.1",
       "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.1.tgz",

package.json

@@ -16,6 +16,7 @@
     "@fortawesome/fontawesome-free": "5.13.1",
     "bootstrap": "4.4.1",
     "clipboard": "2.0.6",
+    "elevator.js": "1.0.1",
     "jquery": "3.5.1",
     "lg-thumbnail": "1.1.0",
     "lightgallery": "1.6.14",

scripts/build.sh

@@ -7,7 +7,7 @@ source ./scripts/common.sh
 rm -rf $OUTPUT_DIR
 rm -rf $STATIC_BUILD
 rm -rf $BASEDIR/resources
-mkdir -p $STATIC_BUILD/js $STATIC_BUILD/css
+mkdir -p $STATIC_BUILD/js $STATIC_BUILD/css $STATIC_BUILD/audio
 cp -r $BASEDIR/node_modules/lightgallery/dist/fonts $STATIC_BUILD
 cp -r $STATIC_SRC/img $STATIC_BUILD/img
 cp -r $BASEDIR/node_modules/lightgallery/dist/img/* $STATIC_BUILD/img
@@ -18,6 +18,7 @@ cp -r $BASEDIR/node_modules/@fortawesome/fontawesome-free/webfonts $STATIC_BUILD
 cp $BASEDIR/node_modules/jquery/dist/jquery.min.js $STATIC_BUILD/js/jquery.js
 cp $BASEDIR/node_modules/lightgallery/dist/js/lightgallery-all.min.js $STATIC_BUILD/js/lightgallery.js
 cp $BASEDIR/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js $STATIC_BUILD/js/bootstrap.js
+cp $BASEDIR/node_modules/elevator.js/demo/music/*.mp3 $STATIC_BUILD/audio/
 
 parcel build --no-source-maps -d $STATIC_BUILD/js/ $STATIC_SRC/js/app.js
 

static/src/js/app.js

@@ -1,4 +1,5 @@
 const Clipboard = require('clipboard');
+const Elevator = require('elevator.js');
 
 function waitFor(obj, property, callback) {
   // Wait for a property to exist on window before running callback
@@ -51,21 +52,24 @@ $(document).ready(function() {
       ele.removeClass('image');
     }
   });
+
+  new Elevator({
+    element: document.getElementById('scroll-elevator'),
+    mainAudio: '/audio/elevator.mp3',
+    endAudio: '/audio/ding.mp3',
+    preloadAudio: false,
+  });
 });
 
-$('.navbar-brand').on('click', function(event) {
-  if ($('html').scrollTop() > 100) {
-    $('html, body')
-      .stop()
-      .animate(
-        {
-          scrollTop: 0,
-        },
-        500
-      );
-  } else {
-    window.location = '/';
-  }
+$('#scroll-top').on('click', function(event) {
+  $('html, body')
+    .stop()
+    .animate(
+      {
+        scrollTop: 0,
+      },
+      500
+    );
   event.preventDefault();
 });
 

static/src/scss/style.scss

@@ -265,3 +265,7 @@ a.no-color-change {
   border: 1px solid $body-color;
   background-color: $body-bg;
 }
+
+#scroll-top, #scroll-elevator {
+  cursor: n-resize;
+}