From 8633292d8159842eecb80b5ef5e769465324a66c Mon Sep 17 00:00:00 2001
From: Kathrin Osswald <kathrin.osswald@uni-ulm.de>
Date: Mon, 10 Jul 2017 13:18:29 +0200
Subject: [PATCH] Improved 'Back to top': Javascript and icon.
---
CHANGES.md | 1 +
amd/build/backtotop.min.js | 2 +-
amd/src/backtotop.js | 21 ++++++++++++---------
scss/post.scss | 10 +++++++++-
templates/columns2.mustache | 4 +++-
5 files changed, 26 insertions(+), 12 deletions(-)
diff --git a/CHANGES.md b/CHANGES.md
index b6f94af..7b15afe 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -6,6 +6,7 @@ Changes
### Unreleased
+* 2017-07-06 - Improved "Back to top": Javascript and icon.
* 2017-07-04 - Settings to be able to catch specific shortcuts to redefine the scrolling to bottom event.
* 2017-07-04 - Added modification hints to overridden layout files.
* 2017-07-04 - Fix CSS selector for the footer separator lines.
diff --git a/amd/build/backtotop.min.js b/amd/build/backtotop.min.js
index 74707a0..1d69e9e 100644
--- a/amd/build/backtotop.min.js
+++ b/amd/build/backtotop.min.js
@@ -1 +1 @@
-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(300):a("#back-to-top").fadeOut(100)}),a("#back-to-top").click(function(b){return b.preventDefault(),a("html, body").animate({scrollTop:0},500),!1})}),{}});
\ No newline at end of file
+define(["jquery"],function(a){"use strict";function b(){a("#page-footer").after('<i class="fa fa-chevron-up fa-2x" id="back-to-top"></i>'),a(window).scroll(function(){a(document).scrollTop()>220?a("#back-to-top").fadeIn(300):a("#back-to-top").fadeOut(100)}),a("#back-to-top").click(function(b){b.preventDefault(),a("html, body").animate({scrollTop:0},500)})}return{init:function(){b()}}});
\ No newline at end of file
diff --git a/amd/src/backtotop.js b/amd/src/backtotop.js
index 8bc73fa..bf49711 100644
--- a/amd/src/backtotop.js
+++ b/amd/src/backtotop.js
@@ -22,15 +22,16 @@
*/
define(['jquery'], function($) {
+ "use strict";
- $(document).ready(function() {
-
+ function initBackToTop() {
// 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>');
+ $('#page-footer').after('<i class="fa fa-chevron-up fa-2x" 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.
+ // 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) {
+ if ($(document).scrollTop() > 220) {
$('#back-to-top').fadeIn(300);
} else {
$('#back-to-top').fadeOut(100);
@@ -41,10 +42,12 @@ define(['jquery'], function($) {
$('#back-to-top').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, 500);
- return false;
});
- });
-
- return {};
+ }
+ return {
+ init: function() {
+ initBackToTop();
+ }
+ };
});
diff --git a/scss/post.scss b/scss/post.scss
index d64a030..58434c4 100644
--- a/scss/post.scss
+++ b/scss/post.scss
@@ -739,8 +739,16 @@ a[href^="mailto"]::before {
#back-to-top {
display: none;
position: fixed;
+ padding: 0.5rem;
bottom: 0.5em;
right: 0.5em;
- color: $brand-primary;
+ line-height: 1.7rem;
+ color: #fff;
+ background-color: $brand-primary;
+ border-radius: 100px;
cursor: pointer;
+ box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
+}
+#back-to-top::before {
+ vertical-align: 0.3rem;
}
diff --git a/templates/columns2.mustache b/templates/columns2.mustache
index 1391e36..0418995 100644
--- a/templates/columns2.mustache
+++ b/templates/columns2.mustache
@@ -108,7 +108,9 @@ require(['theme_boost/loader']);
require(['theme_boost/drawer'], function(mod) {
mod.init();
});
-require(['theme_boost_campus/backtotop']);
+require(['theme_boost_campus/backtotop'], function(mod) {
+ mod.init();
+});
require(['theme_boost_campus/catchshortcuts'], function(mod) {
mod.init({{{catchshortcuts}}});
});
--
GitLab