How to add 'Back to Top' feature to your Moodle site?

When a page is really long (for example, because of infinite scrolling), it becomes too tedious to scroll back up through screens and screens of content. Hence the role of the Back to Top button. It is not just very trendy, but also very useful and it is not implemented in Moodle by default (at least not yet, Moodle v3.8.2). You can see/use a similar one on this particular page, it is a yellow circle with a white arrow on the right.
​Let's see how we can resolve that issue.
Update: it is a core functionality from v3.9, but not as pretty as my solution ;)

---

In my version we are going to place the button hidden at the very end of every page (HTML) and reveal it when we scroll down a little bit (JQuery) and we will control the look as well (CSS).

---

​Step 1: place the hidden button HTML code. Visit your 

• Site administration
•  Appearance
•  Additional HTML

page and insert the following code to the 'Before BODY is closed' textbox:

HTML

You can replace the name of the class of course or even you can use an ID instead of a class, it is up to you. BUT if you change the class to an ID, you have to modify the CSS and the JQuery codes as well.

​The second line is a FontAwesome character. You have to make sure that your Moodle theme is a FontAwesome enabled theme. The new 'Boost' and 'Classic' themes are OK. If you use something else, you might need to do something to enable FontAwesome or use a different character.
​Now the button is there, but it has no style and it is invisible all the time.

fa-chevron-circle-up · Unicode: f139 · Created: v3.1 · Categories: Directional Icons

---

Step 2: give it a style. Go to your theme CSS settings and insert the following code

• Site administration
• Appearance
• Themes
• Classic
• Advanced settings
• Raw SCSS

CSS

/* back to top functionality */
a.Frank_back-to-top {
    background-color: #c43c1e;
    -webkit-border-radius: $border-radius;
    -moz-border-radius: $border-radius;
    border-radius: $border-radius;
    box-shadow: 0 0 1px #FFFFFF;
    color: #FFFFFF;
    display: none;
    padding: 5px 12px;
    position: fixed;
    right: 3px;
    text-align: center;
    top: 85%;
    transition: all 0.3s ease 0s;
    font-size: 2em;
    z-index: 999;
}   

• 3: you can choose another colour, this one is the main colour of my theme
• 4-5-6: 'Classic' or 'Boost' theme can have a '$border-radius' variable, so use the same value here, it will look like other buttons on the site
• 11: make it float at the same position
• 12: at the very right
• 14: at the bottom of the page
• 15: a quick transition to fade in and out
• 16: quite big, recognisable size
• 17: in front of everything

---

Step 3: make it work. Go to your additional HTML settings and add the following JQuery code. Don't forget that you might have other codes already there.

• Site administration
• Appearance
• Additional HTML
• Within HEAD

JQuery

    var offset = 200;
    var duration = 500;
    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('.Frank_back-to-top').fadeIn(duration);
        } else {
            jQuery('.Frank_back-to-top').fadeOut(duration);
        }
    });

    jQuery('.Frank_back-to-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    });   

• 1: how much you have to scroll down to reveal the button, smaller number means sooner
• 2: how fast the animation will be (fade in & out or the actual scroll back to the top)
• 2-9: hide/show the button
• ​11-15: scroll back to the top

---

Tada! I hope it works for you. Visit my dummy Moodle site to see how it works for me. Don't forget to log in as a guest. Enjoy!