Here is the whole HTML document. jQuery does not not work at all. Where is the problem? <html> <head> <title>Test</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> var container = $('div'), scrollTo = $('#td9'); container.animate({ scrollLeft: scrollTo.offset().left - container.offset().left + container.scrollLeft() }); $('div > input').each(function() { var radioInput = $(this); if(radioInput.is(':checked')) { $('div').animate({ scrollLeft: radioInput.offset().left - $('div').offset().left + $('div').scrollLeft() }, 2000); } }); $('input[type=radio]').on('change', function() { if($(this).is(':checked')) { $('div').animate({ scrollLeft: $(this).offset().left - $('div').offset().left + $('div').scrollLeft() }, 2000); } }); </script> <style> div { width: 100px; height: 70px; border: 1px solid blue; overflow: auto; } </style> </head> <body> <div> <table id="my_table"> <tr> <td id='td1'><input type="radio" name="distance" value="1" />111111</td> <td id='td2'><input type="radio" name="distance" value="2" />222222</td> <td id='td3'><input type="radio" name="distance" value="3" />333333</td> <td id='td4'><input type="radio" name="distance" value="4" />444444</td> <td id='td5'><input type="radio" name="distance" value="5" />555555</td> <td id='td6'><input type="radio" name="distance" value="6" />666666</td> <td id='td7'><input type="radio" name="distance" value="7" />777777</td> <td id='td8'><input id="radio8" type="radio" name="distance" value="8" />888888</td> <td id='td9'><input type="radio" name="distance" value="9" checked="checked" />999999</td> </tr> </table> </div> </body> </html> HTML: