Smooth Scrolling For Web Anchor Links
 |
| 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.
The Code...
How it Works...
jQuery
Most 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.
jQuery is a fast, small, and feature-rich JavaScript library, and the smooth scrolling effect is just one of many effects in the library. This jQuery link must come before the other code as it needs to load before the scrolling effect will work.
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
Troubleshooting...
- 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.
- Check that your browser or antivirus is not blocking javascript from running. jQuery uses $ as a shortcut for jQuery. Thus, if you are using another JavaScript library that uses the $ variable, you can run into conflicts with jQuery. In order to avoid these conflicts, you need to put jQuery in no-conflict mode immediately after it is loaded onto the page.
Smooth Scrolling For Web Anchor Links
Reviewed by Opus Web Design
on
January 06, 2017
Rating:
Reviewed by Opus Web Design
on
January 06, 2017
Rating:
