|Click on the demo link below to test the smooth scrolling effect|
I recently added a smooth scrolling effect to this website (test here if you want a demo). It is set to trend in 2017 after all.
During my research in preparation to best implement this effect I was surprised at the variety of code options on offer and even more surprised by the fact most of them didn't work! So with that rant over, I'm writing this short post to save you the time that other websites wasted on me.
Below is the full and exact code you need to add into the 'head' section of your website in order to achieve a smooth scrolling effect for all 'anchor' links on your website.
If you want to learn more about how it works or for any troubleshooting you can read more below.
How it Works...
jQueryMost of the scrolling magic happens offsite which is why the link to the jQuery library is necessary.
Some websites will say you should downloadand host the jQuery library yourself rather than use a CDN (Content Delivery Network) link but many users may already have downloaded jQuery from Google or Microsoft when visiting another site.
As a result, it will be loaded from cache when they visit your site, which leads to faster loading time. Also, most CDN's will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time.
The script which follows the jQuery library link then does the following...
- waits for the page to load
- adds the smooth scrolling effect to all links on the page (to be activated onclick)
- checks to see if variable 'hash' has a value
- if 'hash' has a value, it disables the default anchor link behaviour (usually jump to the link)
- stores the variable
- activates the scrolling effect on the link
- gives you option to set scrolling time in milliseconds
- finally it adds # to the end of the url
- Check that you have copied all the code (Sometimes it's the most obvious thing that we get wrong!)
- Make sure all the code is in the 'head' section of your webpage, between <head> and </head>
- The code needs to be pasted into the head section of every webpage that you want the effect to work on. Unless using a CMS like Blogger or Wordpress, in that case just paste into the site template
- Ensure the jQuery library link is before the rest of the code.