Мнение подобно костям -
у каждого свои

Начнем с того, что существует много вариантов реализации плавной прокрутки до якоря на сайте. Но не все они подходящие, по крайней мере, для меня. Некоторые имеют возможность плавно прокручиваться только до одного якоря на странице сайта, а другие очень сложные и имеют большое количество кода.

В этом примере используется минимальное количество кода и будут работать все якоря на странице сайта. Безусловно, чаще всего плавная прокрутка используется на одностраничных сайтах, чтобы украсить ее.

Итак, что нужно сделать?! Всё просто!

1. Подключаем скрипт с jQuery в конце страницы перед закрывающимся тегом </body> Это позволит избежать возможных конфликтов с уже имеющимися скриптами jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

2. Сразу после подключения jQuery добавляем код скрипта, который позволит нам плавно перемещаться к якорям на сайте:

<script>
$(document).ready(function(){
$("a[href*=#]").on("click", function(e){
var anchor = $(this);
$('html, body').stop().animate({
scrollTop: $(anchor.attr('href')).offset().top
}, 777);
e.preventDefault();
return false;
});
});
</script>

3. Теперь меню с ссылками на якоря. Вид у него примерно такой:

<ul>
<li><a href="#main">Главная</a></li>
<li><a href="#about">О компании</a></li>
<li><a href="#price">Прайс-лист</a></li>
<li><a href="#contacts">Контакты</a></li>
</ul>

Ссылки на якоря указываются с символом # обязательно!

4. Плавный переход будет осуществляться к блоку, у которого id соответствует ссылке в меню, например:

<section id="price">
<p>Тут информация о ценах и прайс-лист</p>
</section>

Вот и всё! При нажатии на кнопку (ссылку) "Прайс-лист" начнется прокрутка к блоку id="price" с информацией о ценах.

Демонстрацию работы смотрите по ссылке.

Рабочий исходник скачать по этой ссылке.

Всем удачи и добра!