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

[dmk]

Есть одностраничный сайт на бутстрап с фиксированным навбаром - 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();
}
});

[dmk]

Мне не нужен 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'
});
};

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

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

[j0hnik]

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

[рони]

Но отступ включается вообще всегда
if( hash = '#id-advantages' )
==

[рони]

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

[dmk]

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

[рони]

Мне не нужен click(),
нужен!!!

[рони]

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

[рони]

dmk,
без анимации
jQuery(window).on('load', function() {
var hash = document.location.hash;
if(hash!=''){
window.scrollBy(0,-50)
}
});

[dmk]

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

[рони]

есть вариант верстку изменить,
можно заменить id на data-id ?

[dmk]

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

[рони]

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

[рони]

а заменить или дописать 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();
}
});

[dmk]

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

[рони]

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

[рони]

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

[рони]

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

[dmk]

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


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>

[dmk]

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

[рони]

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