diff --git a/CHANGES.md b/CHANGES.md index b6f94af9051549993fcc1b3e7c0945a99e6f4019..7b15afe642493007cd0f5f1021f5401d3153bf4c 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 74707a0a529cb789059a344756489a56cf434e98..1d69e9ed7a54c4bde1e77ce1d848a301d0cc5e67 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 8bc73fae75a7e02779e1d046bdb8a99764ec8647..bf497111cc992e490aadf671b00ddbbdd24bb87e 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 d64a03029b18df83a493b8015a9599497dbe30a5..58434c4fbc0d45a0ce01bebce9792da4cb7658f9 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 1391e365ca24fd5c5880545f4a014dbf952a458a..0418995ebae5ae3fc17c7bb93f499a43c6490d84 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}}}); });