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.
This CSS will make the button appear in the bottom right corner, overlaying other elements in a fixed position.
#) 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.
#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
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.
This invisible element marks the position where the masthead ends and the “Back to top” button should be shown.
And lastly, the button itself. You can customize it to your liking (see: button shortcode) but it should have the
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:
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.