Over the years, jQuery became a must-use for every web developer. It is simple to use, fast and very powerful. In this article I have put together a series of 10+ handy jQuery code snippets you may save and copy to use at your own discretion. These snippets are super easy to adapt to match your own script.

Smooth scrolling to top of page

Let’s start this list by a very popular and useful snippet: Those 4 lines will allow your visitors to smooth scrool to the top of the page simply by clicking a a link (with #topid) located at the bottom of your page.

Equal height columns

When you’re using columns to display content on your site, it definitely look better if the columns have an equal height. The code below will take all div elements with the.col class and will adjust their heights according to the bigger element. Super useful!

Preload images

jQuery make it easy to preload images in the background so visitors won’t have to wait forever when they would like to display an image. This code is ready to use, just update the image list on line 8.

Open external links in a new tab/window

The target="blank" attribute allows you to force opening of links in new windows. While it is relevant to open external links in a new tab or window, same domain links should definitely be opened in the same window.

This code detect if a link is external, and if yes, adds a target="blank" attribute to it.

And here is the corresponding jQuery code. The entered password will be evaluated using regular expressions and a message will be returned to the user to let him know if his chosen password is strong, medium, weak, or too short.