如何将滚动位置设置为已检查单选按钮的级别？

Question

如上所述，我有一个小而窄的div，在这个div中有radio buttons。其中一个无线电始终已检查。 我想在页面加载时将滚动条的开始位置设置为选中的单选按钮级别。

有可能吗？如果是，我该怎么办？

小提琴：http://jsfiddle.net/ct346z65/

Answer 1

当页面加载时，您可以过滤所有单选按钮并找到已选中的按钮。当你有这个按钮时，你可以使用jQuery滚动到它。

这是代码html：

<div id="radioContainer">
    <input type="radio" name="distance" value="1"/>1<br>
    <input type="radio" name="distance" value="2"/>2<br>
    <input type="radio" name="distance" value="3"/>3<br>
    <input type="radio" name="distance" value="4"/>4<br>
    <input type="radio" name="distance" value="5"/>5<br>
    <input checked type="radio" name="distance" value="6"/>7<br>
    <input type="radio" name="distance" value="8"/>8<br>
    <input type="radio" name="distance" value="9"/>10<br>
</div>

和JS：

$(document).ready(function() {
    $('#radioContainer > input').each(function() {
        var radioInput = $(this);
        if(radioInput.is(':checked')) {
            $('#radioContainer').animate({
                scrollTop: radioInput.offset().top
            }, 2000);
        }
    });
});

jQuery滚动到动画的来源：jQuery scroll to element

JSFiddle：http://jsfiddle.net/ct346z65/4/