В HTML есть понятие якорь. Это значит, что кликнув по ссылке мы перейдем в то место страницы, где есть соответствующий якорь.
Якорем является html элемент страницы с атрибутом name или id.
Например:
<p id="suda"></p>
А чтобы перейти к этому элементу, используется ссылка вида:
<a href="#suda">Перейти к параграфу</p>
Переход происходит, но быстро. Плавный переход к якорю выглядит более интересно.
Поэтому, для плавного перехода, можно воспользоваться JQuery плагином >> Smooth Scroll jQuery Plugin
Сначала подключаем файл плагина:
<script src="/../src/jquery.smooth-scroll.js"></script>
Путь к файлу, само собой, указываем свой.
И для того, чтобы плагин сработал для всех ссылок на странице, используем такой код:
$(document).ready(function() {
$('a').smoothScroll();
});
Но, может быть, всетаки лучше применять плагин не ко всем ссылкам, а выборочно, задавая для ссылки специальный класс. Пусть имя класса будет anchor, тогда:
$('a.anchor').smoothScroll();
Или так
$('a.anchor').smoothScroll({offset:-50});
Если нужно учесть закрепленное вверху меню.
Более подробную информацию по работе плагина можно будет прочесть, скачав его архив с github.com