Added back to top button with smooth scrolling.

61a7c3b1 · Kathrin Osswald · 15dcbcd6 · 61a7c3b1 · 61a7c3b1 · 61a7c3b1
Commit 61a7c3b1 authored 8 years ago by Kathrin Osswald
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -6,6 +6,7 @@ Changes

 ### Unreleased

+* 2017-03-17 - Added back to top button with smooth scrolling.
 * 2017-03-15 - Setting to choose if switched role information should be displayed beneath course header.
 * 2017-03-13 - Setting to be able to upload a favicon.
 * 2017-03-10 - Setting to be able to display the title for the first course section (section 0) again.

--- a/README.md
+++ b/README.md
@@ -95,6 +95,10 @@ The course settings icon will now be displayed on all sites that renders the cou

 We added the course edit on / off button to the course header again like it was displayed before theme_boost for faster accessibility.

+### Back to top button
+
+We added a back to top button that appears in the right bottom corner when the user scrolls down the page. With a click on it the page scrolls back to top smoothly and the button will disappear again.
+

 Further information
 -------------------

--- a/amd/build/backtotop.min.js
+++ b/amd/build/backtotop.min.js
+define(["jquery"],function(a){return a(document).ready(function(){a("#page-footer").after('<i class="fa fa-chevron-circle-up fa-3x" id="back-to-top"></i>'),a(window).scroll(function(){a(this).scrollTop()>220?a("#back-to-top").fadeIn(500):a("#back-to-top").fadeOut(500)}),a("#back-to-top").click(function(b){return b.preventDefault(),a("html, body").animate({scrollTop:0},500),!1})}),{}});
\ No newline at end of file
--- a/amd/src/backtotop.js
+++ b/amd/src/backtotop.js
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Theme Boost Campus - JS code back to top button
+ *
+ * @package    theme_boost_campus
+ * @copyright  2017 Kathrin Osswald, Ulm University <kathrin.osswald@uni-ulm.de>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+define(['jquery'], function($) {
+
+    $(document).ready(function() {
+
+        // Add a fontawesome icon after the footer as the back to top button.
+        $('#page-footer').after('<i class="fa fa-chevron-circle-up fa-3x" id="back-to-top"></i>');
+
+        // This function fades the button in when the page is scrolled down or fades it out if the user is at the top of the page.
+        $(window).scroll(function() {
+            if ($(this).scrollTop() > 220) {
+                $('#back-to-top').fadeIn(500);
+            } else {
+                $('#back-to-top').fadeOut(500);
+            }
+        });
+
+        // This function scrolls the page to top with a duration of 500ms.
+        $('#back-to-top').click(function(event) {
+            event.preventDefault();
+            $('html, body').animate({scrollTop: 0}, 500);
+            return false;
+        });
+    });
+
+    return {};
+
+});
--- a/scss/post.scss
+++ b/scss/post.scss
@@ -207,3 +207,18 @@ body.path-course-view #section-0 h3.accesshide {
        font-size: $font-size-h3;
    }
 }
+
+
+/*------------------------------------
+  Additional Elements
+  -------------------------------------*/
+
+/* Back to top button */
+#back-to-top {
+    display: none;
+    position: fixed;
+    bottom: 0.5em;
+    right: 0.5em;
+    color: $brand-primary;
+    cursor: pointer;
+}
--- a/templates/columns2.mustache
+++ b/templates/columns2.mustache
@@ -51,6 +51,7 @@
 {{! MODIFICATION:
    * Remove section for footer blocks with own mustache template
    * Add theme_boost_campus/nav-drawer template instead of theme_boost/nav-drawer template
+    * Require own javascript module for back to top button functionality
 }}
 {{{ output.doctype }}}
 <html {{{ output.htmlattributes }}}>
@@ -107,4 +108,5 @@ require(['theme_boost/loader']);
 require(['theme_boost/drawer'], function(mod) {
    mod.init();
 });
+require(['theme_boost_campus/backtotop']);
 {{/js}}