In this short tutorial we’re going to add a smooth back-to-top button to a Genesis theme. This button appears when the browser window is scrolled beyond a certain point and will allow our users to easily go back to the top of the page.
Do you want to see a working demo? Just scroll down and look to the bottom-right.
It’s a pretty straight-forward install; first we’ll add and style the button, then we’ll use a little script to enhance the behavior.
1. Add the To Top button and call the script
We want users to go all the way to the top when they hit the button, so we need to add the button before all other things genesis is spitting out. ‘genesis_before’ should do the trick.
Add the first code in your child theme’s functions.php and add the CSS to your child theme’s style.css
Add a little script
Create a file called to-top.js and add the last code. Place the file to-top.js in your childs theme’s “js” folder. If it’s not there, create it.
The Back To Top arrow image
Dowload the to-top.svg image (right click > save as) and put it in your child theme’s image folder.
That’s all there is to it, you should be able to load your page and see a button appear on the bottom-right.