Skip to content
Snippets Groups Projects
Commit 8633292d authored by Kathrin Osswald's avatar Kathrin Osswald
Browse files

Improved 'Back to top': Javascript and icon.

parent 1b24931d
Branches
Tags
No related merge requests found
...@@ -6,6 +6,7 @@ Changes ...@@ -6,6 +6,7 @@ Changes
### Unreleased ### 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 - 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 - Added modification hints to overridden layout files.
* 2017-07-04 - Fix CSS selector for the footer separator lines. * 2017-07-04 - Fix CSS selector for the footer separator lines.
......
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})}),{}}); 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 \ No newline at end of file
...@@ -22,15 +22,16 @@ ...@@ -22,15 +22,16 @@
*/ */
define(['jquery'], function($) { define(['jquery'], function($) {
"use strict";
$(document).ready(function() { function initBackToTop() {
// Add a fontawesome icon after the footer as the back to top button. // 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() { $(window).scroll(function() {
if ($(this).scrollTop() > 220) { if ($(document).scrollTop() > 220) {
$('#back-to-top').fadeIn(300); $('#back-to-top').fadeIn(300);
} else { } else {
$('#back-to-top').fadeOut(100); $('#back-to-top').fadeOut(100);
...@@ -41,10 +42,12 @@ define(['jquery'], function($) { ...@@ -41,10 +42,12 @@ define(['jquery'], function($) {
$('#back-to-top').click(function(event) { $('#back-to-top').click(function(event) {
event.preventDefault(); event.preventDefault();
$('html, body').animate({scrollTop: 0}, 500); $('html, body').animate({scrollTop: 0}, 500);
return false;
});
}); });
}
return {}; return {
init: function() {
initBackToTop();
}
};
}); });
...@@ -739,8 +739,16 @@ a[href^="mailto"]::before { ...@@ -739,8 +739,16 @@ a[href^="mailto"]::before {
#back-to-top { #back-to-top {
display: none; display: none;
position: fixed; position: fixed;
padding: 0.5rem;
bottom: 0.5em; bottom: 0.5em;
right: 0.5em; right: 0.5em;
color: $brand-primary; line-height: 1.7rem;
color: #fff;
background-color: $brand-primary;
border-radius: 100px;
cursor: pointer; cursor: pointer;
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
}
#back-to-top::before {
vertical-align: 0.3rem;
} }
...@@ -108,7 +108,9 @@ require(['theme_boost/loader']); ...@@ -108,7 +108,9 @@ require(['theme_boost/loader']);
require(['theme_boost/drawer'], function(mod) { require(['theme_boost/drawer'], function(mod) {
mod.init(); mod.init();
}); });
require(['theme_boost_campus/backtotop']); require(['theme_boost_campus/backtotop'], function(mod) {
mod.init();
});
require(['theme_boost_campus/catchshortcuts'], function(mod) { require(['theme_boost_campus/catchshortcuts'], function(mod) {
mod.init({{{catchshortcuts}}}); mod.init({{{catchshortcuts}}});
}); });
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment