jQuery smooth scrolling to anchor after button clicked

Question

I can't get this to smoothly scroll down to the anchor for some reason. Can anybody see why?

This is the html:

<div id="onward">
    <a href="#xdroneslogan" class="btn">
        <i class="icon-chevron-down icon-white"></i> Onward
    </a>
</div>

This is the javascript:

<script>
    $("#onward a").click(function(){
      var onwardId = $(this).attr("href");
      $("html, body").animate({scrollTop: $(onwardId).offset().top}, "slow");
      return false;
    });
</script>

Answer 1

Try this out:- http://jsfiddle.net/adiioo7/bguAG/1/

JS:-

$("#onward a").click(function () {
    var onwardId = $(this).attr("href");
    $("html, body").animate({
        scrollTop: $(onwardId).offset().top
    }, "slow");
    return false;
});

HTML:-

<div id="xdroneslogan" style="height:1000px;background:red;"></div>
<div id="onward">
<a href="#xdroneslogan" class="btn"><i class="icon-chevron-down icon-white"></i> Onward</a>

</div>

Also make sure the jQuery.fx.off is set to false.