Scrolling Table of Contents with Jquery and CSS3
If you have very long pages like Wikipedia, you might want to organize your paragraphs with some sort of stylish scrolling Table of Contents (TOC). In this article we will create a nice little Table of Contents with bit of jQuery and CSS3. Div element stays fixed on the left or right side of the page for easy navigation of the page, it can be expended and collapsed easily by a reader.
We start with CSS code, as you can see I have applied CSS3 transform Property in .toc-button class. When applied CSS3 transform rotates div element smoothly to degree we specify, this CSS property is only supported in modern browsers, for older browsers such as IE8 it will just change the button image.
jQuery code is pretty simple, we are mainly using .addClass() and removeClass() to apply our CSS3 style to the button, and scrollTop to scroll page to sections user want to read.
Saran Chamling. (He loves the web technology, and enjoys designing, exploring and writing about it @saaraan.com).