jQuery gentle scroll

Question

Hi there - due to the nature of my site, I often have to link to anchors listed within a page, rather than just to the page itself. An example can be found here: http://www.unknowntales.net/chapter/route/choice/#chapter3

What I'm looking for is some jQuery code which I can use to make the page slowly scroll down to the anchor, rather than jumping to it directly.

Can anyone help me out? Thank you.

Answer 1

assuming your html is:

<a href="#someid">click me</a>
<h1 id="someid">some heading<h1>

this should work

$('a').click(function(e) {
    e.preventDefault();
    var targetOffset = $($(this).attr('href')).offset().top;

    $('html,body').animate({ scrollTop: targetOffset - 100 }, 500);
});