Merge pull request #405 from pythoncanarias/404-add-up-button

feat: add footer button with scroll up function

Author: sdelquin

apps/commons/static/commons/css/base.scss

@@ -49,6 +49,7 @@ body {
 
 .footer-page {
   background-color: $footer-bg;
+  position: relative;
 
   a {
     color: $footer-fg;
@@ -60,11 +61,11 @@ body {
 
   .footer-column {
     color: #ebebeb;
-    padding-top: 0.5rem;
+    padding-top: 2rem;
     padding-bottom: 0.5rem;
 
     @include from($desktop) {
-      padding-top: 1rem;
+      padding-top: 2rem;
       padding-bottom: 3rem;
     }
   }
@@ -106,3 +107,19 @@ body {
 .container {
   padding-top: 2rem;
 }
+
+.footer-button {
+  position: absolute;
+  top: -22.5px;
+  left: calc(50% - 22.5px);
+  z-index: 100;
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 45px;
+  height: 45px;
+  border-radius: 22.5px;
+  border-color: $header-bg;
+  background-color: whitesmoke;
+}

apps/commons/static/commons/img/ico-arrow.svg

@@ -1,11 +1,13 @@
 import NavbarBurger from './navbar-burger'
 import Notifications from './notifications'
 import Collapsable from './collapsable'
+import ScrollUpButton from './scrollUpButton'
 
 export default {
   init: () => {
     NavbarBurger.init()
     Notifications.init()
     Collapsable.init()
+    ScrollUpButton.init()
   },
 }

apps/commons/static/commons/js/general/index.js

@@ -0,0 +1,22 @@
+'use strict'
+
+function init() {
+  const scrollToTopBtn = document.getElementById('scrollToTopBtn')
+
+  const rootElement = document.documentElement
+
+  function scrollToTop(ev) {
+    ev.preventDefault()
+    // Scroll to top logic
+    rootElement.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    })
+  }
+
+  scrollToTopBtn.addEventListener('click', scrollToTop)
+}
+
+export default {
+  init,
+}

apps/commons/static/commons/js/general/scrollUpButton.js

@@ -39,7 +39,7 @@
       {% if menu %}
         is-wide
       {% endif %}
-    ">
+    " id="content-page">
     {% if menu %}
       <div class="columns is-display">
         <div class="column is-one-quarter">

apps/commons/templates/base.html

@@ -1,5 +1,12 @@
+{% load utils %}
 <footer class="footer-page has-text-centered" style="margin-top: 4em;">
-
+  <a class="footer-button" id="scrollToTopBtn" href=""
+    ><img
+      class="footer__button--image"
+      src="{{ assets|get_asset_key:'commons/img/ico-arrow.svg' }}"
+      alt="scroll button up"
+      titile="scroll button up"
+  /></a>
   <div class="columns">
     <div class="column has-text-weight-light">
       <div class="footer-column">