I was working with a client recently who wanted to implement a “Smooth Scrolling” function (smoothscroll.js) for anchor tags on their FAQs page on their WordPress site.
QUICK NOTE ON THE CLIENT:
The client’s new company is called Smockbox. Smockbox is an extremely passionate team that is dedicated to equipping parents and families with some of the hippest, and sustainably acquired, clothing options for babies and children. All for an affordable monthly price. Pretty awesome, huh?
I saw a lot of material on how to add a “back to top” link/button that would work universally across the site, but I had a hard time finding anything for implementing smooth scrolling for a single page. So I “borrowed” other great developers ideas and put something together based on my knowledge of WordPress, PHP, jQuery etc.
I am currently using this code on WordPress 4.5 for me and it works great for me, but with updates being released all the time it may need updating/tweaking. Feel free to add, edit, request anything that seems out of place. I am happy to hear your critiques and improve this.
- Hopefully you are working with a child theme, but if not – do that first, as always ( click here ).
- Depending on the theme you are using, default or premium, your child theme may already have a custom js folder in the theme directory most likely titled “js” (go figure). If this folder doesn’t exist, go ahead and create it and upload it through FTP/SFTP.
- Next upload the file smoothscroll.js to your “js” folder. Now that the jQuery is uploaded to your server we are ready to enqueue it into your active theme.
- Enqueueing properly depends on a few factors of course! Namely the specified ‘path’ you are requesting the functions.php file to find our wonderful bit of jQuery. What I have should be relative enough but you may need to adjust this based on your theme setup.
- Now for the conditional tag – as mentioned above I wanted this function to only be enacted on the client’s “FAQs” page only. You may have something else in mind. Just replace my conditional tag specification with your own. There are plenty to choose from.
- After adjusting the conditional tag, copy and paste the code commented below as //ENQUEUE JQUERY SMOOTH SCROLL into you functions.php and upload it through FTP.
-Check the console for errors – but you should be ready to start seeing some smooth scrolling on your anchor tags
WANT TO SEE IT IN ACTION?
You can see the “smoothscroll.js” in action at https://smockbox.co/faqs
The enqueuing was adapted from wpbeginner
The smoothscroll.js was adapted in part from Brad S. Knutson