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.

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

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.

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

<span id="after-masthead" />

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

<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:

<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