Positionselement in der Mitte des sichtbaren Ansichtsfensters mit Überlauf-y: scroll

Question

Ich habe diese Website ziemlich grob gebaut, die einen ähnlichen Effekt wie die iOS Safari Tab-Ansicht verwendet, um verschiedene Seiten eines virtuellen Buches zu betrachten. Alles funktioniert gut, abgesehen davon, dass ich nicht jede Seite im sichtbaren Ansichtsfenster zentrieren kann. Wenn Sie beispielsweise zur letzten "Seite" blättern und darauf klicken, springt sie an den Anfang des Dokuments, anstatt in der Mitte des sichtbaren Ansichtsfensters zu bleiben.

Ich denke, dass dies mit der Tatsache zu tun hat, dass die scrollbare Div verwendet Überlauf-y: Scroll, aber ich kann einfach nicht für das Leben von mir herauszufinden, wie das Problem zu beheben.

Jede Hilfe würde sehr geschätzt werden !!

Hier ist meine jQuery:

jQuery(document.body).on('click', '.page', function() { //Change to touchstart 

// Generate number between 1 + 2 
var randomClass = 3; 
var randomNumber = Math.round(Math.random() * (randomClass - 1)) + 1; 

// Initialise & Random Number 
jQuery(this).addClass("activated").addClass('scaled-' + randomNumber); 

// Exiting - Reset All 
jQuery(document.body).on('click', '.activated', function() { //Change to Touchstart 
    jQuery(this).removeClass("activated scaled-1 scaled-2 scaled-3"); 
}); 
}); 

Und hier ist ein jsfiddle mit all meinen Code in es so können Sie eine bessere Vorstellung davon zu bekommen, was ich versuche zu erreichen.

https://jsfiddle.net/ontu1ngq/

Dank!

Answer 1

Sie müssen die Menge, die #wrapper wurde gescrollt, so dass Sie verwenden können, um die top der .page entsprechend einzustellen. Wenn Sie dann die Klasse .activated entfernen, müssen Sie nur den Inline-Stil top entfernen.

jQuery(document.body).on('click', '.page', function() { 
    var randomClass = 3; 
    var randomNumber = Math.round(Math.random() * (randomClass - 1)) + 1; 
    jQuery(this).addClass("activated").addClass('scaled-' + randomNumber); 

    var wrapper_scrollTop = $("#wrapper").scrollTop(); //gets amount scrolled 
    var half_wrapper = $("#wrapper").height()*(0.5); //50% of wrapper height 
    jQuery(this).css("top",half_wrapper+wrapper_scrollTop); 

    jQuery(document.body).on('click', '.activated', function() { 
     jQuery(this).removeClass("activated scaled-1 scaled-2 scaled-3"); 
     jQuery(this).css("top","") //returns top to original value specified in css 
    }); 
}); 

prüfen diese Arbeits Geige aus: https://jsfiddle.net/tardhepc/1/