Jquery scrollTop goes to the wrong position
<p>Inside a div with scroll, when I press the button CLICK ME, the script below should scroll to the text "SHOULD GO HERE". Something similar to an anchor link.</p>

<p><strong>JsFiddle</strong>: <a href="https://jsfiddle.net/hhqnjojr/2/" rel="nofollow">https://jsfiddle.net/hhqnjojr/2/</a></p>

<p>Instead, the script scrolls to a random position (?) way above the text "SHOULD GO HERE". Please, what am I doing wrong?</p>

<pre><code>$("#my_button").click(function() {
    $('#wrapper_div').animate({
        scrollTop: $("#go_here").offset().top
    }, 2000);
}); 
</code></pre>