jquery smooth scroll to an anchor in wordpress

Question

I'm trying to implement jquery smooth scroll to an anchor after clicking the menu item in the wordpress. I'm using this example:

http://jsfiddle.net/YtJcL/

Here is the js file:

 $(".anchor_scroll").click(function(event){
 event.preventDefault();
 //calculate destination place
 var dest=0;
 if($(this.hash).offset().top > $(document).height()-$(window).height()){
    dest=$(document).height()-$(window).height();
}else{
    dest=$(this.hash).offset().top;
}
//go to destination
$('html,body').animate({scrollTop:dest}, 5000,'swing');
});

In my wordpress page I create a section:

<section id="services"></section>

and in the wordpress custom menu put a class "anchor_scroll" to a link:

<a class="anchor_scroll" href="#services">.

After this I'm able to navigate to an anchor in the page after pressing the link, however, the jquery code seems to be not working, because there is no smooth slide effect, just jump.

Answer 1

Here's the code I would use for this;

$(".anchor_scroll").click(function(){
    var section = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $(section).offset().top - 15
    });  
});