How to do a jQuery version of an a-name link?

I would like to have a name link type effect where instead of it working like the regular html version:

<a href="#take-me-down">Take me down the page</a>

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

<a name="take-me-down">Hi there</a>

it will instead have a nice "slide down the page to that portion" effect. Kind of like those "back to top" links so开发者_运维问答me sites have in their footers which when clicked takes the user to the top of the page by smoothly sliding them up.

How can this be done using jQuery?

---

At Stack Overflow, we use the jQuery ScrollTo plugin. (It's included at the top of our user-page.js).

In your example, you could do

$('#take-me-down').click(function() {
    $.scrollTo($('a[name="take-me-down"]'), 400);
    return false;
});