Q:

JQuery - Animation scrollTop

I have two buttons and 2 hidden parts related to these buttons.
When a button is clicked, it's related part will show up and the document will scroll to the top.
Problem: The part is shown, but doesn't move to the top.
Please help. Thanks!
JSfiddle
HTML
<div style="border:1px solid black;width:100px;height:250px;overflow:auto">
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
</div>
<a data-target="one">First Button</a>
<a data-target="two">Second Button</a>

<hr>
<div class="hide" id="one">First Element</div>
<hr>
<div class="hide" id="two">Second Element</a>
<hr>

JS
$("a").click(function(e) {
    e.preventDefault();
    var target = $(this).data("target");
    $('#' + target).show().animate({
        scrollTop: "0px"
    }, 800);
});

A:

In order to scroll to the top, you must use this js code and it's better to not use selectors like a in this way because it will force js to trigger our function for every single a tag. Modify it in this way $("a[data-target]")
$("a[data-target]").click(function(e) {
    e.preventDefault();
    var target = $(this).data("target");
    $('#' + target).show();
    $(document).animate({ scrollTop: "0px" }, 800);
});

Or for a better result, you can make it Asynchronous:
$("a[data-target]").click(function(e) {
    e.preventDefault();
    var target = $(this).data("target");
    $('#' + target).show("slow", function(){
        $(document).animate({ scrollTop: "0px" }, 800);
    });
});

