如何将“切换滑块内容”的顶部滚动到视口的中心

How to scroll top of Toggle Slider Content to center of viewport?

本文关键字：顶部 滚动 视口      更新时间：2023-09-26

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

http://nextree.ch/module/

要重新创建问题，请单击"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
});

谢谢你的帮助。

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

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

相关文章：