Shane Daly Digital was recently hired to build a new website for an artist. The website was designed to showcase the artist’s work and as a user scrolled more and more images would be displayed. As with all infinity loading sites this meant that the scroll back to the top was a slow process and not very pleasant. In order to combat this we installed a ‘Scroll to Top’ button that appeared in the lower right corner once the user began scrolling.
All in all its a simple process and I would class it as a medium level difficulty tutorial. Essentially there are only five steps:
1. Add a an a tag with class of ‘to-top’ to genesis_before so that we have a point to scroll back to
4. Upload the scroll icon into your child theme’s upload directory
5. Style scroll button according to your website’s design guide.
Step one is nice and easy. All we need to do is add an a tag with class of ‘to-top’ to genesis_before. Let’s add one new line of code and include a title tag. Simply add the following code to your functions.php file.
We now need to en-queue this in our functions.php file using the standard Genesis script loading function.
Now we need to upload an icon that we will use in our to-top button. This gets uploaded to our themes upload folder. Feel free to use whatever icon you like but we choose the standard upturned arrow.
Finally you just need to add some styling to your button to make sure it matches your brand’s guidelines. Styling of course gets added to style.css. Feel free to play with the opacity and color to make it fit with the rest of the website.
Thanks to Derek Price and all the folks of the Genesis Community who helped me put together this (and all) of my tutorials.