Tabbed-Steuerelemente im HTML-Format beheben Immer am unteren Rand des Bildschirms angezeigt

Question

Ich arbeite an einer Audit-Site für das Unternehmen, für das ich arbeite. Wir wollen Fragen auf einer einzigen SEHR langen Seite zeigen können, mit den Optionen Ja/Nein/NA als Optionsfelder neben jeder Frage.

Wir haben die Fragen und die Steuerelemente richtig geladen, aber wir möchten, dass Benutzer die Fragen durchblättern und schnell beantworten können. Das Problem dabei ist, dass beim Tab-Tab der Radio-Button am unteren Rand der Seite angezeigt wird.

Ich habe online nach einer Lösung gesucht, aber ich hatte nicht viel Glück, eine zu finden, jedes Mal, wenn Sie Tab und HTML zusammen erwähnen, meint Google, dass Sie meinen, einen neuen Tab zu öffnen oder Tabs auf Ihrer HTML-Seite anzuzeigen.

Hat jemand Erfahrung damit? Ich habe versucht, am unteren Rand meiner Optionsfeld-Steuerelemente einen Padding hinzuzufügen, aber das schien nicht zu funktionieren.

Answer 1

Stellt sich heraus, ich brauchte Javascript, nicht HTML/CSS. Mit der Lösung, die ich gefunden here, konnte ich es so machen, dass es beim Tab durch die Kontrollen scrollen. Ich habe speziell den folgenden Code verwendet.

$(':input').focus(function() { 
     var center = $(window).height()/2; 
     var top = $(this).offset().top; 
     if (top > center) { 
      $('html, body').animate({ scrollTop: top - center }, 'fast');    
     } 
    });