Question

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

要重新创建此问题，请单击“Kunden”，然后向下滚动并单击“Produkte”。现在你会注意到你被扔到非常非常长的中间。这令网站访问者感到恼火。我想要实现的是，使内容的顶部始终位于视口的某个位置。就像可能从顶部或视口中心偏移200px。理解？

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

$("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
});

感谢您的帮助。

Answer 1

你必须在第一个动画完成后开始第二个动画。要实现此目的，请使用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
});

Answer 2

您可以尝试scrollIntoView功能。您可以在单击元素的标题上调用它。 https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView

如何将Toggle Slider Content的顶部滚动到视口中心？

2 个答案: