jquery - Scroll to element returning offset null -

i'm trying element id select box, , scroll element with:

// jump services $(function () {     $("select.jump").change(function() {         var selected = $(this).find("option:selected").val();         console.log(selected);         $('html, body').animate({             scrolltop: $("#" + selected).offset().top         }, 2000);     }); }); 

console.log(selected) returns id correctly, offset null.

it appears bracket , slash issue in id seletors.

you mentioned have brackets , slashes in ids.

whether or not square brackets or ordinary brackets, brackets have special meaning in jquery selectors. , including slashes, should avoid them altogether in html ids. it's illegal ids if refer w3c spec.

square brackets in jquery selectors attribute-related.

ordinary brackets in jquery selectors filter-related.

see jquery selectors: http://api.jquery.com/category/selectors/

and typical selectors same css selectors, , should follow same naming conventions such: see http://www.w3.org/tr/css21/syndata.html#value-def-identifier

here quote above w3c link:

identifiers (including element names, classes, , ids in selectors) can contain characters [a-za-z0-9] , iso 10646 characters u+00a0 , higher, plus hyphen (-) , underscore (_); cannot start digit, 2 hyphens, or hyphen followed digit. identifiers can contain escaped characters , iso 10646 character numeric code (see next item). instance, identifier "b&w?" may written "b\&w\?" or "b\26 w\3f".

here demo illustrate issue: http://jsfiddle.net/terryyounghk/tkx36/

while there nothing wrong script, safety net nice:

// jump 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 in case element not found         }     }); });