Mittlere Ausrichtung des Ansichtsfensters mit Scroll-Effekt auf Abschnitt

Question

Ich habe ein Skript, das abhängig von der ausgewählten Box verschiedene Bereiche öffnet und schließt.

brauche ich diese Abschnitte in der Mitte des Bildfensters sein einmal geklickt (mit einer glatten Animation wenn möglich)

Hier ist meine aktuelle Skript:

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

Ich brauche ‚target‘ zentriert werden im Ansichtsfenster nach dem Öffnen.

Answer 1

Ich benutze eine Funktion, die ich gefunden habe, um das Scrollen zu animieren, übergeben Sie es das Element, das Sie scrollen möchten und den Scroll-Offset, um zu scrollen.

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