JQuery -动画scrollTop

Question

我有两个按钮和两个隐藏部分与这些按钮有关。当一个按钮被点击，它的相关部分将显示出来，文档将滚动到顶部。

问题:部分显示，但没有移动到顶部。

请帮帮忙。谢谢!

JSfiddle

<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);
});

Answer 1

为了滚动到顶部，您必须使用这个js代码，最好不要像a这样使用选择器，因为它将迫使js为每个a标记触发我们的函数。用这种方式修改它，$("a[data-target]")

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

或者为了获得更好的结果，您可以使它异步：

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