Stackoverflow Response: Scroll to element returning offset null

http://stackoverflow.com/questions/16341381/scroll-to-element-returning-offset-null/16342716#16342716

HTML

<b>Select an option from the dropdown at the top right. Only the <u>section5</u> option should work.</b>

<div id="section\[1]">Section 1 (Should fail)</div>
<div id="section\(2)">Section 2 (Should fail)</div>
<div id="section\3">Section 3 (Should fail)</div>
<div id="section/4">Section 4  (Should fail)</div>
<div id="section-5">Section 5  (Should work)</div>

<select class="jump">
    <option>--- Choose an option ---</option>
    <option value="section\[1]">section\[1]</option>
    <option value="section\(2)">section\(2)</option>
    <option value="section\3">section\3</option>
    <option value="section/4">section/4</option>
    <option value="section-5">section5</option>
</select>

CSS

div {
    height: 350px;
    border: 1px solid red;
}

select.jump {
    position: fixed;
    right: 30px;
    top: 5px;
}

JavaScript

// jump to services
$(function () {
    $("select.jump").change(function() {
        var selected = $(this).find("option:selected").val(),
            $selected = $("#" + selected);

        if ($selected.length) {
            $('html, body').animate({
                scrollTop: $selected.offset().top
            }, 2000);
        } else {
            // handle this in case element is not found
        }
    });
});