Most web browsers now use smooth scrolling when you hit spacebar or use the page up/down shortcuts. I like this behaviour because it helps you keep your bearings as you navigate through a page — but for some reason modern web browsers don’t animate to internal anchor locations and insist on skipping straight to them.
To extend this to anchor links, I’ve written a jQuery plugin to easily add smooth scrolling to all anchored locations on a page with no need to make any changes to your markup.
The plugin is really easy to use. You just include the .js file and initialise the plugin like this:
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="SmoothAnchors.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$().SmoothAnchors();
});
</script>
If you’re using jQuery 1.7+, the plugin will use the jQuery .on() function to work with links that have been added after the plugin has been initialised (i.e. if you’re dynamically adding content to your page).