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
document.addEventListener('chap_ready', function() {
	window.jQuery && jQuery(function($) {
		/** Back to top button visibility. */
		$('#after-masthead').visibility({
			once: false,
			onBottomPassed: function() {
				$('#to-top').transition('fade in');
			},
			onBottomPassedReverse: function() {
				$('#to-top').transition('fade out');
			},
		});
	});
});

This 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.

Tip: also enable the Chap Theme -> General -> Miscellaneous -> Smooth anchor links option for smooth scrolling when returning to top.
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 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.