セクション上のスクロールエフェクト付きビューポートを中央に配置

Question

選択したボックスに応じてさまざまなセクションを開いたり閉じたりするスクリプトがあります。

私は（可能であれば滑らかなアニメーションで）ビューポートの真ん中にあるように、これらのセクションは一度クリックする必要

ここに私の現在のスクリプトです：

$(function() { 
    $('.box').each(function() { 
    var targetElement = $($(this).data('target')); 
    targetElement.slideUp() 
    $(this).click(function() { 
     if(targetElement.is(':visible')) { 
     targetElement.slideUp(); 
     adjustHeight(); 
     $("element").paroller(); 
     } else { 
     targetElement.slideDown() 
     targetElement.siblings('.section').slideUp() 
     adjustHeight(); 
     $("element").paroller(); 
     } 
    }) 
    }) 
}); 

私はセンタリングされる「targetElement」を必要としますビューポートが開いた後に表示されます。

Answer 1

私は、スクロールしたい要素をスクロールしてスクロールするために、 にスクロールアニメートする機能を使用しました。

function scrollTo (element, to, duration) { 
    var start = element.scrollTop, 
     change = to - start, 
     currentTime = 0, 
     increment = 20; 

    var animateScroll = function() { 
     currentTime += increment; 
     element.scrollTop = Math.easeInOutQuad(currentTime, start, change, duration); 
     if (currentTime < duration) { 
      setTimeout(animateScroll, increment); 
     } 
    }; 
    animateScroll(); 
}; 

var targetElement = $($(this).data('target')).offset().top; 
scrollTo(document.body, targetElement, 1000);