javascript - 如何将“切换滑块内容”的顶部滚动到视口(viewport)中心？

我的网站上有那些切换滑块。请在这里查看：

http://nextree.ch/module/

要重现该问题，请单击“ Kunden”，然后向下滚动并单击“ Produkte”。现在您会发现自己陷入了非常非常长的时间之中。那激怒了网站的访问者。我想要实现的是，始终将内容的顶部始终放在视口的某个位置。像是从视口的顶部或中心偏移200像素。了解？

这是使切换滑块起作用的当前代码：

$("p.trigger, h3.trigger").click(function () {
    var $this = $(this);
    var hasActive = $this.hasClass('active');

    $("p.trigger, h3.trigger").removeClass("active");
    $('.toggle_container').not($this.next()).slideUp();
    if (!hasActive) {
        $this.addClass("active");
    }
    $this.next().slideToggle(500);
    return false; //Prevent the browser jump to the link anchor
});

谢谢你的帮助。

最佳答案

您必须在第一个动画完成后开始第二个动画。为此，请使用slideUp的完整回调

$("p.trigger, h3.trigger").click(function () {
    var $this = $(this);
    var hasActive = $this.hasClass('active');

    $("p.trigger, h3.trigger").removeClass("active");
    $('.toggle_container').not($this.next()).slideUp(500, function() {
        if (!hasActive) {
            $this.addClass("active");
        }
        $this.next().slideToggle(500);
    });

    return false; //Prevent the browser jump to the link anchor
});

关于javascript - 如何将“切换滑块内容”的顶部滚动到视口(viewport)中心？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20149451/