jQuery如何让可滚动div自动滚动到内部默认选中的radio单选框位置

可以实现，两种常用实现方式如下：

基础HTML结构示例（对应你的业务场景） #

<!-- 父滚动容器：高度按4个选项的总高度设置，超出自动滚动 -->
<div id="radioContainer" style="height: 200px; overflow-y: auto; border: 1px solid #eee;">
  <label><input type="radio" name="number" value="1"> ONE</label><br>
  <label><input type="radio" name="number" value="2"> TWO</label><br>
  <label><input type="radio" name="number" value="3"> THREE</label><br>
  <label><input type="radio" name="number" value="4"> FOUR</label><br>
  <label><input type="radio" name="number" value="5"> FIVE</label><br>
  <label><input type="radio" name="number" value="6"> SIX</label><br>
  <label><input type="radio" name="number" value="7" checked> SEVEN</label><br>
  <label><input type="radio" name="number" value="8"> EIGHT</label><br>
  <label><input type="radio" name="number" value="9"> NINE</label><br>
</div>

方案1：使用scrollIntoView（推荐，适配性高） #

不需要手动计算高度，原生API自动适配元素位置，代码最简单：

// 页面加载完成后执行
window.addEventListener('load', function() {
  // 选中容器内已勾选的radio元素
  const checkedRadio = document.querySelector('#radioContainer input[type="radio"]:checked');
  if (checkedRadio) {
    checkedRadio.scrollIntoView({
      block: 'nearest', // 自动对齐到最近的可视边缘，避免多余滚动
      behavior: 'auto' // 需要平滑滚动可改为'smooth'
    });
  }
});

方案2：手动计算滚动距离（适合需要精准控制偏移的场景） #

window.addEventListener('load', function() {
  const container = document.getElementById('radioContainer');
  const checkedRadio = document.querySelector('#radioContainer input[type="radio"]:checked');
  if (checkedRadio) {
    // 单选框相对于容器顶部的偏移
    const radioOffsetTop = checkedRadio.offsetTop;
    // 减去单个选项的高度（示例值40，按你实际样式调整），避免选中项贴在容器顶部
    container.scrollTop = radioOffsetTop - 40;
  }
});

注意事项 #

• 如果选项是动态渲染生成的，需确保DOM渲染完成后再执行滚动逻辑，避免找不到目标元素。
• scrollIntoView 兼容性覆盖所有主流浏览器，仅参数配置模式不支持IE8及以下，常规场景优先选方案1。

内容的提问来源于stack exchange，提问作者marfab