a 태그 클릭시 스크롤 에니메이션 효과 jQuery

a 태그를 클릭했을때 본문에 위치한 id 값으로 스크롤 되어 이동이 되는데요. 문제는 스크롤이 찰나?에 바로 되기 때문에 스크롤 되는 효과를 보기 어렵습니다. 그래서 아래의 jQuery 소스 코드를 첨부하면 됩니다. 참고로 $('.menuInfo > a') 이 부분은 자신에 소스 코드에 맞게 수정하시면 됩니다.

var $root = $('html, body');

$('.menuInfo > a').click(function() {

    $root.animate({

        scrollTop: $( $.attr(this, 'href') ).offset().top

    }, 500);

    return false;

});