Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

Share this Page URL

4. Building Custom Scrollbars > Smooth scrolling - Pg. 70

Building Custom Scrollbars Smooth scrolling jScrollPane is a mature and full-featured plugin. If you poke through the examples and documentaton, you'll fnd all kinds of fun optons to play with. I'll walk you through setng up one of my favorites: animated scrolling inside the scrollable area. Time for action ­ setting up smooth scrolling You could place any kind of content you'd like inside a scrollable area--a list of news stories, a gallery of photos, or a long artcle with several sectons, headings, and subheadings, for example. Here's how you can set up a control to smoothly scroll from one secton to another: 1. The frst thing we'll need to do is assign an ID to each of our paragraphs. I have fve paragraphs of lorem ipsum in my scrollable area, so I'm going to assign them id s of para1 , para2 , para3 , para4 , and para5 . You can choose whatever id s you like, but keep in mind that an id cannot begin with a number. So now my code looks like this (I've truncated the text to save space): <div id="scrolling"> <p id="para1">Lorem ipsum...</p> <p id="para2">...</p> <p id="para3">...</p> <p id="para4">...</p> <p id="para5">...</p> </div>