How to set scroll position to the level of checked radio button?

Question

enter image description here

As you see above, I have a small and narrow div and in this div there are radio buttons. One of the these radios is always checked. I want to set scroll bar's start position to the level of checked radio button when page loaded.

Is it possible? If yes, how can I do it?

fiddle: http://jsfiddle.net/ct346z65/

please post the code to jsfiddle and provide a link unless it's quite problematic to give you any solution. — Skynet, Sep 13 '14 at 12:02

score 1 · Accepted Answer · edited May 23 '17 at 12:00

When the page loads you can filter through all the radio buttons and find the one that is checked. When you have that button you can just scroll to it with jQuery.

This is the code 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>

and the JS:

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

Source for the jQuery scroll to animation: jQuery scroll to element

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

How to set scroll position to the level of checked radio button?

1 Answers1