Back to top button

Many sites often have a button that allows the user to scroll all the way back to the top easily. Chap theme doesn’t include this feature out of the box, but it can be added with some custom code in the theme options.

Code for adding “Return to top” button to Chap theme:
CSS
Chap Theme -> Code -> Global CSS/Sass
#to-top {
    position: fixed;
    bottom: 2%;
    right: 2%;
    z-index: 1000;
}

This CSS will make the button appear in the bottom right corner, overlaying other elements in a fixed position.

JavaScript
Chap Theme -> Code -> Global JavaScript
jQuery(function($) {
    /**
     * Smooth anchor link scrolling.
     */
    $('a[href*="#"]:not([href="#"])').click(function() {
        if(location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if(target.length) {
                $('html, body').animate({scrollTop: target.offset().top}, 500);
                return false;
            }
        }
    });
    /**
     * Back to top button visibility.
     */
    $('#after-masthead').visibility({
        once: false,
        onBottomPassed: function() {
            $('#to-top').transition('fade in');
        },
        onBottomPassedReverse: function() {
            $('#to-top').transition('fade out');
        },
    });
});

The first JavaScript block makes anchor links (links that begin with #) scroll to the anchor smoothly. If any third party scripts already add this functionality for your site or you don’t want smooth scrolling you can omit that part.

The second JavaScript block hides the button when the #after-masthead element is on screen and shows the button when it’s not. If you want the button to always be visible you can remove this block and remove the transition hidden classes from the button below, as well as omit adding the #after-masthead element.

Shortcode
Chap Theme -> Code -> Template content -> Before header content
<span id="top" />

This invisible element added before the header will be the anchor point where the button will scroll to. While logged in to WordPress and having the admin bar visible, it may scroll a little lower than all the way to the top, but this shouldn’t be an issue for normal visitors.

Shortcode
Chap Theme -> Code -> Template content -> After masthead content
<span id="after-masthead" />

This invisible element marks the position where the masthead ends and the “Back to top” button should be shown.

Shortcode
Chap Theme -> Code -> Template content -> After footer content
<button primary circular massive icon transition hidden id="to-top" url="#top" aria-role="button" aria-label="Return to top">
  <icon arrow up>
</button>

And lastly, the button itself. You can customize it to your liking (see: button shortcode) but it should have the id="to-top" and url="#top" attributes at the very least. Since the button has no visible content it also includes an aria-label describing what the button does to screen readers.

That should add the back to top button that is hidden until the user scrolls below the masthead and scrolls smoothly to the top when clicked. You should see a demo of the button on this page.

Alternatively, you can also keep it much simpler and only add this code:

Shortcode
Chap Theme -> Code -> Template content -> Before header content
<span id="top" />

And then you can add a link to #top anywhere, such as the footer menu or footer widgets and it would scroll to the top as well.

Scroll to top

Leave a comment

Your email address will not be published. Required fields are marked *