Смещение якоря при фиксированном меню

Если вы используете фиксированное меню в верху сайта, то вы могли столкнуться с проблемой, что заголовок якоря перекрывается самим фиксированным меню. Можно решить эту проблему с помощью padding или margin, но в таком случае получим лишний отступ пред якорем или контентной частью. Для решения этой задачи можем использовать следующий код:

$( document ).ready(function() {
    //получаем высоту панели
    var headerHeight = $('.navbar-default').outerHeight();

    $('a').on('click', function(e) {
        // определяем все якорные ссылки и высчитываем высоту к блоку прокрутки
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top - headerHeight
        }, 1500, 'easeInOutExpo');
        event.preventDefault();

        //добавляем якорь в url
        history.pushState({}, "", this.href);
    });     
});

Где .navbar-default - класс фиксированного меню.

Скрипт вычислит высоту меню и переместит пользователя к якорю за вычетом высоты меню. Таким образом меню не будет перекрывать заголовок (начало) якоря.