Making named anchor links scroll to div

Question

Here's my site I'm having issues with: http://www.londonadvertising.com/2011/

It's a one page site and all the hyperlinks go to an area of the page using an anchor. Click a link such as:

<a href="#news">News</a>

and it will jump down to the section:

<li id="news" class="section_wrapper">

What is the best way using jQuery to make the jump to section a smooth scroll to section?

Many Thanks Tim

Answer 1

Just a classic idea:

DEMO jsBin

$('#nav li').click(function(){
  var liInd = $(this).index();
  var pagePos = $('.page').eq(liInd).position().top;

  $('body').stop(1).animate({scrollTop: pagePos},1000); 
}); 

Answer 2

您可以使用jquery插件jQuery.ScrollTo，它具有平滑的scrool和多种效果，例如使用它的示例：

$.scrollTo( '#target-examples', 800, {easing:'elasout'} );