html - 修复 HTML 中的 Tabbing 控件总是显示在屏幕的底部边缘

Question

我正在为我工​​作的公司做审计工作。我们希望能够在一个非常长的页面上显示问题，每个问题旁边都有 Yes/No/NA 选项作为单选按钮。

我们已正确加载问题和控件，但我们希望用户能够快速浏览问题并快速回答。这样做的问题是，当使用 tab 键时，它会在页面的最底部边缘显示被选中的单选按钮。

我在网上搜索了一个解决方案，但没有找到一个解决方案，因为每次您同时提到选项卡和 HTML 时，Google 都认为您的意思是打开一个新选项卡或在您的 HTML 页面上显示选项卡。

有没有人有这方面的经验？我试过在单选按钮控件的底部添加填充，但这似乎不起作用。

Answer 1

原来我需要 Javascript，而不是 HTML/CSS。使用我找到的解决方案 here ，我能够让它在通过控件切换时保持滚动。我专门用了下面的代码。

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