Internal anchor links are very common place,
e.g. “back to top” links, or FAQ pages which list all the questions at the top.
Making them visually scroll to their target not only looks a bit fancy, it also gives some visual feedback to the user as to their new position on the page.

This is what it looks like in action, click the following link:
Scroll to comments

This technique is very simple.

1. Set up your link as you normally would,
   e.g. href=”#comments” (where comments is the id of your target)
2. Add a class=”scroll” attribute to the link element, so it now looks something like this:

   <a href="#comments" class="scroll">Scroll to comments</a>

3. Finally add the following jQuery code wherever is most appropriate

   jQuery(document).ready(function($) {
    
   	$(".scroll").click(function(event){		
   		event.preventDefault();
   		$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
   	});
   });

And that’s all there is to it

Run jQuery code when page has finished loading (DOM ready)

$(document).ready(function() {
	// code here
});
 
// jQuery shortcut to DOM ready
$(function() {
	// code here
});

Run jQuery in “no conflict” mode

jQuery.noConflict();
 
// run code when DOM ready using $ shortcut
jQuery(document).ready(function($) {
	// code here
});

Get selected text from select element

$("#ID :selected").text()

Get multiple selected text from select element into array

var arr_text = [];
$("#ID :selected").each(function(i, selected){
	arr_text[i] = $(selected).text();
});

Bind a click event

$("#ID").bind("click", function(){
	alert("Clickity Click");
});

Load jQuery from Google’s CDN

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'></script>