Here's what I use:
<!-- jquery smooth scroll to id's -->
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 500);
return false;
}
}
});
});
</script>
The beauty with this one is you can use an unlimited number of hash-links and corresponding ids without having to execute a new script for each.
If you’re using WordPress, insert the code in your theme’s footer.php
file right before the closing body tag </body>
.
If you have no access to the theme files, you can embed the code right inside the post/page editor (you must be editing the post in Text mode) or on a Text widget that will load up on all pages.
If you’re using any other CMS or just HTML, you can insert the code in a section that loads up on all pages right before the closing body tag </body>
.
If you need more details on this, check out my quick post here: jQuery smooth scroll to id
Hope that helps, and let me know if you have questions about it.