如何將切換滑塊內容的頂部滾動到視口中心？

Question

我有我的網站上的那些切換滑塊。請參考這裏：

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

感謝您的幫助。

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