Share Coding

Tutorials, Problems, Stuffs …

Category Archives: jQuery

jQuery scroll to top not working

var $container = $('html, body, .divProductList');	

        scrollTop : 0
    }, 300);
    return false;

The magic is in the $container selector. Put your list, html, body into the target.


How to improve your jQuery

1. Use unique ‘id’ when selecting (Fastest)

$('#btnTest'); //Correct
$('input#btnDiv'); //Wrong
$('#btnDiv #btnTest'); //Wrong

2. Use ‘tag’ before select ‘class’


3. One select to do all works

// Correct
	.css('color', 'red');

// Wrong
$('#btnTest').css('color', 'red');

4. Reduce append times

// Correct
var appendHTML = '';
for(var i=0; i<10; i++) {
	appendHTML += '<p>' + i + '</p>';

// Wrong
var $divTest = $('#divTest');
for(var i=0; i<10; i++) {
	$divTest.append('<p>' + i + '</p>');

Select excetly parent

Basically, this is the jQuery basic selector to select a html object.



How to select a parent?

$('#btnSubmit').parent() // my parent
$('#btnSubmit parent') // my top parent


But browser will add <tbody> to our <table>, so that we can’t select excetly parent by





Select the closest table parent, you may use class to instead table

Custom Scroll bar like Facebook by using JQuery Plugin

Click here for Demo

To make a scrollbar like that, you will need jQuery, jQuery UI and SlimScroll:

1. Import the jQuery, jQuery UI library and SlimScroll plugin

<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>

Read more of this post

Create a jQuery + PHP Webpage Template

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="" >

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Simple jQuery Template</title>

<!-- (jQuery & jQuery UI) SCRIPT and CSS -->
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<link type="text/css" href="" rel="Stylesheet" />

* {

$ = function() {
	this.css('position', 'absolute');
	this.css('left', '50%');
	this.css('top', '50%');
	this.css('margin-left', -this.width() / 2 + 'px');
	this.css('margin-top', -this.height() / 2 + 'px');
	return this;
	$("#btnTest").button().center().click(function() {
		alert("Simple jQuery Layout");


<body style="font-family:微軟正黑體, 微软雅黑, Tahoma, Geneva, sans-serif; font-size:12px;overflow-x: hidden">

	<?php echo '<input id="btnTest" type="button" value="Test" />'; ?>