Открытие ссылок с анкором. Хедер перекрывает контент
 

Есть одностраничный сайт на бутстрап с фиксированным навбаром - https://entera.pro
Меню плавно скролится по странице к анкорам, установлен сдвиг при скролле на высоту хедера.
Но если ссылку с анкором открывать не со страницы, а отдельно, тогда хедер перекрывает заголовок секции:
https://entera.pro/#id-advantages

Как сделать сдвиг для ссылок с анкором? Не ломая все остальное, потому что сдвиги уже есть для прокрутки из меню.

Есть куча кривых вариантов с отрицательными отступами и фиксированным контентом, а нормальный способ не нашел. Чтобы ровно было и одинаково для всех открываемых ссылок с анкорами, откначинающихся с id-

dmk,

jQuery(window).on('load', function() {
var hash = document.location.hash;
if(hash!=''){
jQuery("a[href='"+hash+"']").click();
}
});

Мне не нужен click(), у меня для скроллинга меню такая функция:

$( 'a.nav-link[href*="#id"]' ).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 - 50)
            }, 1000, "easeInOutExpo");
            return false;
        }
    }
});

Но при открытии прямой ссылки с анкором, заголовок секции оказывается под хедереом.

Пробовал разные чудаковатые варианты вроде этого:

var hash = window.location.hash;
    if( hash = '#id-advantages' ) {
        jQuery( 'div#id-advantages' ).css({
            'padding-top' : '400px'
        });
    };

Но отступ включается вообще всегда

Или я неправильно понял вашу функцию?

dmk,
событие 'load' происходит при загрузке всех ресурсов, это как раз для прямого перехода.
добавить не пробовали?

==

dmk,
код проверили из поста №2?

Добавил, работает. Наверно раньше как-то криво добавлял, не работало. Только сейчас получается, что секция открывается закрытая хедером и через пару секунд заголовок выезжает из-под хедера. Можно отключить анимацию (если это она) для прямых переходов по анкору?

нужен!!!

можно но будет скачок, на форуме для данной проблемы, решения пока никем не предложено(только костыль типа клика по ссылке), если есть подскажите.

dmk,
без анимации

jQuery(window).on('load', function() {
var hash = document.location.hash;
if(hash!=''){
window.scrollBy(0,-50)
}
});

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

можно заменить id на data-id ?

Да, могу data атрибуты вставить секциям

dmk,
не вставить, а заменить или дописать data-?

тогда код будет

jQuery(window).on('load', function() {
jQuery('[data-id]').each(function() {
    var id = $(this).data('id');
    this.id = id
	});
var hash = document.location.hash;
if(hash!=''){
jQuery("a[href='"+hash+"']").click();
}
});

Вставить имею в виду дописать напрямую в коде, не с помощью js

да

dmk,
<div id="id-advantages" class
дописать в ручную
<div data-id="id-advantages" class

ссылки по теме Перехват перехода по якорю
https://javascript.ru/forum/jquery/1...o-yakoryu.html
http://qaru.site/questions/68128/how...loading-a-page
если кто-то знает решение, подскажите, кроме как убрать id в исходном коде , и вернуть id скриптом, другого варианта не вижу.

Спасибо! Во второй ссылке нашел решение. Заключается оно в сбрасывании полученного хэша и скролле к нужной секции (взятой из хеша)

var anchorLink = window.location.hash,
    anchorText = anchorLink.replace( '#', '' );

window.location.hash = '';

jQuery(window).on( 'load', function() {
    if (anchorText) {
        jQuery( 'html, body' ).animate({
            scrollTop: jQuery( '#' + anchorText ).offset().top - 80
        }, 700, 'swing', function () {});
    }
});

Вот так работает:
https://entera.pro/#id-advantages

и клике!!!
первый скрипт ставят самым первым на странице
второй после jQuery

<script>
var anchorLink = window.location.hash;
window.location.hash = '';
  </script>
  <script>
jQuery(window).on( 'load', function() {
    if (anchorLink) {
        jQuery(anchorLink).click()
    }
});

  </script>

Так совсем не работет, не скроллится к сеции. Вставил в шапке и футере после jquery

dmk,
второй надо ставить после клика по ссылкам