JQuery Tips, Tricks and Common Patterns

Using jQuery to Scroll to the bottom of an Element

$(“#myDiv”).attr({scrollTop: $(“#myDiv”).attr(“scrollHeight”)});

This highlights a nice feature of JQuery that I’ve completely missed in the past. Some properly have used to use the get() function to get a handle on the actual DOM element, and then set JS attributes. Using this old and klunky technique, the above would look something like:

$("#myDiv").get().scrollTop = $("#myDiv").get().scrollHeight;

That’s about the same amount of typing, I suppose. But using attr seems neater, dontchathink?

Selecting Select-List Options

This is generally just a simple matter of doing something like:

$(":inputname=name of select option").val("value of option you want to select");

However, I’ve had trouble with this working in IE (especially if select lists are being hidden and shown based on some client-side form dynamics). To get around that, it seems like setting the selected property directly on the option, like so (selects the very first option… but you can use other variations):

$(":inputname=name of select option option").get(0).selected = true;

Deryn Johnstone


I operate my business Creative Website Designs. My specialties are in Web Development, Search Engine Optimization, Online Marketing, PHP, OpenText, HTML,CSS, JavaScript, Word press, and Joomla. I formally worked as a web developer and SEO Specialist for Bell Potter Securities, Exa and Arrows Internet Marketing.