jQuery for Designers Beginner's Guide

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 article with several sections, headings, and subheadings, for example. Here's how you can set up a control to smoothly scroll from one section to another:

1. The first thing we'll need to do is assign an ID to each of our paragraphs. I have five paragraphs of lorem ipsum in my scrollable area, so I'm going to assign them ids of para1, para2, para3, para4, and para5. You can choose whatever ids 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> ...