Ciao, buon anno a te.
Ho fatto qualche prova.
Non so dirti come sono arrivato al risultato.. è tardi e ora mi butto a letto.. per cui ti posto semplicemente l'esempio funzionante che ho fatto.
Se hai dubbi, chiedi.
codice:<!DOCTYPE HTML> <html> <head> <title>Esempio</title> <meta charset="utf-8"> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <style type="text/css"> #tastiera{ width:100%; height:300px; position:fixed; bottom:0; background:rgba(80,80,80,.8); } body{ padding-bottom:300px; } </style> <script type="text/javascript"> $(function(){ var $elementi = $("input"); // collection degli elementi su cui eseguire lo scroll var delayscroll; // delay di attivazione dello scroll dopo il resize $elementi.focus(scrolla); // al focus su uno degli elementi, eseguo lo scroll $(window).resize(function(){ // al resize della finestra clearTimeout(delayscroll) // azzero e delayscroll = setTimeout(function(){ // riattivo il delay $elementi.filter(":focus").length && scrolla(); // se uno degli elementi ha il focus, eseguo lo scroll },300) // tempo del delay }) function scrolla(){ // funzione scroll var $campoattivo = $elementi.filter(":focus"); // il campo attivo var $tastiera = $("#tastiera"); // l'elemento tastiera $('html, body').stop().animate( // avvio l'animazione { 'scrollTop': $campoattivo.offset().top // posizione del campo rispetto al documento +$campoattivo.height()+10 // altezza del campo + un valore X di scostamento -$tastiera.position().top // posizione della tastiera rispetto alla finestra (sostanzialmente) } , 300 // durata animazione ); } }) </script> </head> <body> 1<input> <br><br><br><br> 2<input> <br><br><br><br><br><br><br> 3<input> <br><br><br><br><br> 4<input> <br><br><br><br><br><br><br> 5<input> <br><br><br><br><br><br> 6<input> <br><br><br><br><br><br><br> 7<input> <div id="tastiera">TASTIERA</div> </body> </html>


Rispondi quotando