Плавная прокрутка по странице

Часто необходимо на лендингах реализовать плавную прокрутку по сайту. Для этого я использую якори.

Первым шагом будет подключение библиотеки JQuery, если она еще не подключена на вашем сайте:

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/libs/jquery-2.0.3.min.js"><\/script>')</script>

Теперь создадим html разметку:

<ul>
  <li><a href="#menu1">меню 1</a></li>
  <li><a href="#menu2">меню 2</a></li>
  <li><a href="#menu3">меню 3</a></li>
</ul>
<div id="menu1">
  якорь 1
</div>
<div id="menu2">
  якорь 2
</div>
<div id="menu3">
  якорь 3
</div>

Здесь у нас простые якори. Все работает но конечно без плавной прокрутки.
CSS для увеличения размера страницы:

div{
  margin-top:500px;
}

Ну и сам скрипт плавной прокрутки:

$('a[href*=#]').bind("click", function(e){
  var anchor = $(this);
  $('html, body').stop().animate({
     scrollTop: $(anchor.attr('href')).offset().top
  }, 1000);
  e.preventDefault();
});

Все вместе получим следующий результат:

7661