JSFiddle - React, Tailwind, and code Playground

HTML

<div id="radioContainer" style="display: block; overflow-y: auto; height: 130px;">
    <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>

JavaScript

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