Якорная ссылка в любом месте Zero Block
Код позволяет сделать якорную ссылку внутри одного Zero блока.
Якорная ссылка задается в навигации любой ссылкой, к примеру #linkname1. Все ссылки которые нужны прописываются в коде:
<!-- Якорная ссылка в любом месте зеро блока -->
<script>
document.addEventListener("DOMContentLoaded", function () {
// === НАСТРОЙКИ ===
// прописываем все ссылки которые нужны
const anchorsList = [
"#linkname1",
"#linkname2"
];
const offsetDesktop = 0; // если нужен отступ на десктопа в px
const offsetMobile = 0; // если нужен отступ на моб в px
const mobileBreakpoint = 768; // диапазон моб
function getOffset() {
return window.innerWidth <= mobileBreakpoint
? offsetMobile
: offsetDesktop;
}
// обработка только указанных ссылок
anchorsList.forEach(function(anchorHref) {
const links = document.querySelectorAll('a[href="' + anchorHref + '"]');
links.forEach(function(link) {
link.addEventListener("click", function(e) {
const anchorName = anchorHref.substring(1); // убираем #
const target = document.querySelector("." + anchorName);
if (target) {
e.preventDefault();
const elementPosition = target.getBoundingClientRect().top + window.pageYOffset;
const offsetPosition = elementPosition - getOffset();
window.scrollTo({
top: offsetPosition,
behavior: "smooth"
});
}
});
});
});
});
</script>
Создаем шейп, в Zero, вставляем его в нужно место, убираем заливку и присваиваем класс согласно его ссылке.
Если ссылка на якорь #linkname1 то класс прописываем linkname без #
Если нужна помощь:
Начать дискуссию