This tutorial contains the code which adds a animated smooth scrolling back to top link in your sites footer. The code includes a Dashicon for the arrow, a small jQuery file and 3 CSS rules.
Here’s the demo video :
You can :
- Style the background to the arrow
- Change the arrow icon to any other dashicon
- Set the offset value in the jQuery to any distance in pixels so the back to top link appears after a specific scroll distance.
There’s 3 simple steps :
Step 1 : From the download folder, upload the file named top.js to your child themes js folder.
Step 2 : From the download folder, copy & paste the PHP code from the functions file to the end of your child themes functions.php file.
Step 3 : From the download folder, copy & paste the CSS from the style.css file to the end of your child themes style.css file and clear caching.
Register or login to access the download folder :