How to add top up button

on Sunday 15 December 2019
comments: 0

Open footer templates (default and small).  Path:  theme/footers/


Add this code at the end of files (after closing footer tag)

<div id="back-top">
    <a href="#uiModal"><i class="fa fa-chevron-up"></i></a>


 #uiModal says where you will go after click on that button.  This tag is inserted by e107 itself, so we use it, otherwise some ID has to be added to headers or body. This is quick solution.


open style.css or style_custom.css file and add this code:

#back-top a:hover {
    background-color: rgba(228, 122, 128, 0.9);
#back-top a {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999999999;
    color: #eee;
    background-color: rgba(228, 122, 128, 0.3);    
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
    padding: 10px;
    border-radius: 4px;
    text-align: center;

#back-top a i {
    font-size: 2em;

#back-top .fa {
    width: 30px;


background-color: rgba(228, 122, 128, 0.9);

the button of colour on mouse hover. If you want it lighter, change value 0.9  

background-color: rgba(228, 122, 128, 0.3);

the normal colour of the button (with 0.3 opacity is very light).  rgba(228, 122, 128) is RGBA version of #E47A80 - default colour of buttons (that "pink").   Change it to your used colour.

border-radius: 4px;

standard gaia radius for buttons.


Don't forget to clear browser cache (CTRL-F5). You should now see not working, but styled button.


open custom.js in the theme folder. Add this code (before last  });   )

// hide #back-top first
    // fade in #back-top
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) {
            } else {

        // scroll body to 0px on click
        $('#back-top a').click(function () {
                scrollTop: 0
            }, 500);
            return false;


by default (on first screen) is button hidden. After first scrolling light version is displayed with animation effect (fadeIn/fadeOut). 

After click on button scrolling to the top is animated.  500 is the speed of scrolling.

Source of this solution:  OpenMind theme.


If it doesn't work, check console for javascript errors (F12, tab Console).  You can see this in action in the Gaia demo.


Other links

Follow us