Animate function jquery running twice

Question

Guys I've been wracking my brain for entirely too long on this code. For the life of me, I cannot figure out why it runs twice every time I click on the link. Could anyone please take a look at my code and tell me why it's doing this?

<script type='text/javascript'>//<![CDATA[ 

$(function(){

function scrollToAnchor(aid){
var aTag = $("a[name='"+ aid +"']");
$('html,body').animate({scrollLeft: aTag.offset().left}, "slow", function() { console.log("test"); } );
};

$(".forward").click(function() {
    var div_name = $(this).attr("href");
    scrollToAnchor(div_name);
});

});//]]>

HTML

<div class="next">
    <span style="font-size:48px;"><a class="forward" href="#id2">&nbsp;></a></span>
</div>

CSS

.next{
    position:fixed;
    padding:10px;
    background: rgba(0,0,0, 0.6);
    top:48%;
    right:0;
    text-shadow: 1px 1px 1px #000;
    z-index:201;
}
.next a{
    text-decoration:none;
    color:white;
}
.next a:hover{
    text-decoration:none;
    color: red;
}

Each time you click on "forward" it should only log "test" to the console once but it is logging it twice.

Answer 1

just adding my comment as answer for other having the same problem:

$('html,body').animate({scrollLeft: aTag.offset().left}, "slow", function() { console.log("test"); } );
};

$('html,body') cause the html tag AND the body tag to be animated, so the animation seems to run twice. Just change it to $('body') to fix this.