For people who knows maybe its easy to go back to top of our web page by hit ‘Home’ keyboard key when they where visiting our site with their Computers Desktop/Laptop. But not all people who visiting your site know that. Especially when they read your post about tutorial that pretty length enough.
To make audience easily go back to top of pages is by adding a ‘Scroll Back to Top’ button. It seem a trivial stuff, but it needed for audience comfortability to use your site. Actually it can be done easily by install a plugin. But if you want to learn how to create ‘Your own’ button and get your hand a little dirty then in this post we will learn together how to create custom scroll back to top button for genesis theme.
The original source basic code was actually I’ve learned from w3schools.com, but I have modified a little in CSS and HTML only. What I do here was just figure out how to install the code in Genesis themes.
Other than Genesis themes, itss maybe only work in a few themes and won’t work or look good on most WordPress themes.
Here we go!
1. Adding JS code to WordPress
To adding a JS code go to your cPanel > File Manager > Home > public_html > wp-content > themes > ‘Your Genesis theme’ > js Right click on ‘responsive-menu.js’ file to edit it. And place the JS code below.
2. Adding CSS Code
To adding CSS code simply go to WP admin > Appearance > Customize And place the code below to Additional CSS.
4. Add HTML code
To add HTML code, first you need to install ‘Genesis Simple Hooks’ plugin, you can download Here and upload it to your site.
Or simply search it directly from WP Admin > Plugins > Add New.
After you finished installing Genesis Simple hooks plugin, copy HTML code below:
<button onclick=”topFunction()” id=”myBtn” title=”Go to top”><span class=”dashicons dashicons-arrow-up-alt2″></span></button>
And paste the code to WP Admin > Genesis > Simple Hooks > genesis_before_footer Hook
See screen shot below
Don’t forget to click the ‘Save Changes’ button.
5. Change button color style
When you use CSS code exactly the same like the example, the buttons backgroun-color is #fff, the /* Text color */color is #999 and buttons hover color is rgba(0, 0, 0, 0.1)/transparent-silver white.
So to change the buttons color, you need to edit #myBtn CSS code that highlighted above. That you can simply edit the html color in Additional CSS, so it will match with your themes color and design.
Okay! thats it! Not too difficult eh? 😅
If you found a difficulties please don’t hesitate to ask in comment. Maybe I can help you.
Thanks for visiting my blog 🙂