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

В HTML переход по якорям очень резкий и не всегда приятный для глаза, тем самым приходится использовать дополнительные скрипты, чтобы смягчить передвижение по якорям на сайте.

Демо

Например у вас есть:

<a href="#go-down">Ссылка к якорю</a>
<p>
Представим, что тут очень много текста, блоков, картинок и тд
</p>
<div id="go-down">Важная информация</div>

И если у вам хочется, чтобы при нажатии на  <a href="#go-down">Ссылка к якорю</a> ваш экран медленно перемещался к <div id="go-down">Важная информация</div> то вам нужно использовать jQuery скрипт, который предоставлен ниже.

$(function() {
    $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if (target.length) {
                $('html,body').animate({
                scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});

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

Как это работает?

Он считывает нажатия на любую ссылку на сайте с хештегом («#») в href атрибуте и если хештег есть,  дальше он наличие элемента к которому должен пройзости скролл и если такое есть, то с помощью анимации перемещает экран пользователя к нужному элементы.

Поменять скорость перемещения экрана можно на строке 9, изменив 1000 (1000 = 1 секунду) на любое другое число.

Если у вас есть какие-либо вопросы — задавайте их в комментарии ниже.