[Treehouse presents]

[Smooth Scrolling jQuery with Andrew Chalkley]

Hi, I'm Andrew.

In this Treehouse Quick Tip, we're going to use jQuery

to do some smooth scrolling on an FAQ page.

As you can see here, we've got a list of FAQs

and when you click on one, it jumps you down to the question and answer.

Instead of jumping from the link to the text,

it would be nice to scroll smoothly down to the answer.

This should also help the user get an idea

of where they are on the page as it scrolls.

Here in the code, we have a list of links.

Each of the links goes to one of the FAQs down the page.

If you notice, each of the link hrefs is exactly the same

as the id of the div surrounding an FAQ.

We can use jQuery to select the appropriate div when the link is pressed and scroll to it.

First let's select the links in the FAQs unordered list.

and then we want to bind a click handler to these links

and then finally get the contents of the href attribute.

We'll store this in a variable called FAQ id [faqId].

Next we want to select the body and use the animate method.

The animate method takes 2 parameters:

1) the options for the animation and 2) the speed.

We will fill in "slow" for the speed at the moment.

We're only concerned with the scrollTop option

which tells the selected element—in our case, the body—to scroll to the top

of a specified number of pixels.

We want this to be the top offset of our FAQ div, so let's select the correct div

with the faqId and use the offset method and the top attributes

to get the number of pixels offset.

Finally we want to return "false" to stop the browser's default behavior

of following the link and jumping to the page.

Now let's try that out.

So let's reload the page and see the results of what we've done.

As you can see when we click on these links now,

the page scrolls nicely and smoothly to the correct FAQ.

And that's it—without altering a line of HTML,

we've used jQuery to give a nice polish to the user experience.