ho raffazzonato temporaneamente una soluzione stabilendo la posizione per ogni ancora, per ogni visualizzazione responsive, con questo css:

<style>

#artisti {
display: block;
position: relative;
top: -300px;
visibility: hidden;
}

@media (max-width: 1149.9px) and (min-width: 720px) {
#artisti {
top: -315px ;
}
}

@media (max-width: 719.9px) and (min-width: 480px) {
#artisti {
top:-315px;
}
}

@media (max-width: 479.9px) {
#artisti {
top:-50px;
}
}

#contatti {
display: block;
position: relative;
top: -300px;
visibility: hidden;
}

@media (max-width: 1149.9px) and (min-width: 720px) {
#contatti {
top:-180px !important;
}
}

@media (max-width: 719.9px) and (min-width: 480px) {
#contatti {
top:-120px;
}
}

@media (max-width: 479.9px) {
#contatti {
top:-50px;
}
}
</style>

però la soluzione mi lascia un po' perplesso, devo andare a occhio su ogni visualizzazione..

sono ben accetti consigli e suggerimenti..

Anch'io uso poco le ancore proprio per lo stesso motivo, se qualcuno suggerisce qualcosa...

Ciao Paolo ciao Alberto. Nelle proprietà della pagina in cui avete messo gli ancoraggi inserite questo semplice script (NO AI BLABLA)► Proprietà pagina → Esperto → Codice (prima della chiusura del tag </body>)

Lo stesso codice può essere fatto in tanti modi diversi.

<script>
document.addEventListener("DOMContentLoaded", function () {
const delayInSeconds = 1;

let stickyBarHeight = 0;

// Funzione per aggiornare l'altezza della sticky bar
function updateStickyHeight() {
const stickyBar = document.querySelector("#imStickyBar");
stickyBarHeight = stickyBar ? stickyBar.offsetHeight : 0;
}

// Scroll compensato se presente un anchor
function scrollToAnchor() {
const anchor = window.location.hash;
if (anchor) {
setTimeout(() => {
const targetElement = document.querySelector(anchor);
if (targetElement) {
const offsetTop = targetElement.getBoundingClientRect().top + window.scrollY;
const scrollToPosition = offsetTop - stickyBarHeight;
window.scrollTo({ top: scrollToPosition, behavior: "smooth" });
}
}, 600);
}
}

// Dopo il delay iniziale
setTimeout(() => {
updateStickyHeight();
scrollToAnchor();
}, delayInSeconds * 1000);

// Aggiorna altezza sticky su resize
window.addEventListener("resize", () => {
setTimeout(updateStickyHeight, 1000);
});
});
</script>

Oppure in Jqueri

<script>
$(document).ready(function () { // on DOM ready
var delaySec = 1; // ritardo iniziale (secondi)
var stickyH = 0; // altezza sticky bar
var $stickyBar = $("#imStickyBar");

/* ---- funzioni ---- */
function updateStickyHeight() { // calcola altezza barra
stickyH = $stickyBar.length ? $stickyBar.outerHeight() : 0;
}

function goToAnchor() { // scroll compensato se c'è #
var anchor = window.location.hash;
if (anchor) {
setTimeout(function () {
var $target = $(anchor);
if ($target.length) {
var pos = $target.offset().top - stickyH;
$("html, body").animate({ scrollTop: pos }, 500);
}
}, 600); // ritardo extra
}
}

/* ---- esecuzione iniziale con ritardo ---- */
setTimeout(function () {
updateStickyHeight();
goToAnchor();
}, delaySec * 1000);

/* ---- ricalcola altezza su resize ---- */
$(window).on("resize", function () {
setTimeout(updateStickyHeight, 1000);
});
});
</script>

Con variabili personali (Sman=smanettone)

<script>
$(document).ready(function () {
// Altezza barra sticky da compensare
var sman_delaySeconds = 1;
var sman_stickyHeight = 0;

// Calcola altezza stickyBar dopo 1 secondo
setTimeout(function () {
sman_stickyHeight = $("#imStickyBar").height() || 0;
}, 1000);

// Ricalcola altezza su resize
$(window).on("resize", function () {
setTimeout(function () {
sman_stickyHeight = $("#imStickyBar").height() || 0;
}, 1000);
});

// Esegui controllo anchor dopo delay
setTimeout(function () {
sman_handleAnchor();
}, sman_delaySeconds * 1000);

// Funzione che gestisce eventuale ancora nella URL
function sman_handleAnchor() {
var sman_urlParts = window.location.href.split('/');
var sman_anchorPart = sman_urlParts[sman_urlParts.length - 1];

if (sman_anchorPart.indexOf("#") == -1) {
// Nessuna ancora presente → non fare nulla
} else {
// Presente ancora → forza ancoraggio e compensazione
if (sman_anchorPart.indexOf("#") != -1) {
location.href = sman_anchorPart;
sman_scrollToAnchor();
}
}
}

// Scroll compensato verso l'ancora
function sman_scrollToAnchor() {
setTimeout(function () {
sman_stickyHeight = $("#imStickyBar").height() || 0;
var sman_scrollNow = $(window).scrollTop() - sman_stickyHeight;

$("html, body").animate({
scrollTop: sman_scrollNow
}, 500);
}, 600);
}
});
</script>

Ovviamente da provare! A me funziona perfettamente anche se, a dire la verità uso pochissimo le ancore.

Volendo si può provare anche questo di codice che ho ritrovato nei miei archivi:

<script>
document.addEventListener("DOMContentLoaded", function () {
// Aspetta che il DOM sia completamente caricato

const delayInSeconds = 1;
let stickyBarHeight = 0;

// Funzione per calcolare l'altezza della barra sticky, se presente
function updateStickyHeight() {
const stickyBar = document.querySelector("#imStickyBar");
stickyBarHeight = stickyBar ? stickyBar.offsetHeight : 0;
}

// Scorrimento verso un elemento, compensando l'altezza della barra sticky
function scrollToElementWithOffset(element) {
if (!element) return;
const offsetTop = element.getBoundingClientRect().top + window.scrollY;
const scrollToPosition = offsetTop - stickyBarHeight;
window.scrollTo({ top: scrollToPosition, behavior: "smooth" });
}

// Se c'è un hash nella URL (#sezione), effettua lo scroll corretto
function scrollToHashAnchor() {
const anchor = window.location.hash;
if (anchor) {
const targetElement = document.querySelector(anchor);
setTimeout(() => scrollToElementWithOffset(targetElement), 600);
// Attendi un po' per permettere al browser di posizionare l'elemento
}
}

// Intercetta tutti i click su link ad ancora interni (es. <a href="#about">)
function handleAnchorClicks() {
document.querySelectorAll('a[href^="#"]').forEach(anchorLink => {
anchorLink.addEventListener("click", function (e) {
const hash = this.getAttribute("href");
const target = document.querySelector(hash);
if (target) {
e.preventDefault(); // Impedisce il salto istantaneo
history.pushState(null, "", hash); // Aggiorna l'URL senza ricaricare
scrollToElementWithOffset(target); // Scorrimento compensato
}
});
});
}

// Dopo un piccolo ritardo: aggiorna l’altezza, scrolla se c'è hash e imposta i listener
setTimeout(() => {
updateStickyHeight();
scrollToHashAnchor();
handleAnchorClicks();
}, delayInSeconds * 1000);

// Ricalcola l’altezza della barra sticky al resize della finestra
window.addEventListener("resize", () => {
setTimeout(updateStickyHeight, 1000);
});
});
</script>

Caspita, non mi aspettavo una soluzione così completa !! Grazie mille Roberto, la provo e ti faccio sapere.

Ciao Paolo. Intanto provalo specialmente l'ultimo listato che diciamo è il più completo in quanto intercetta anche i link su pagina.

Oppure questa versione da mettere prima della chiusura della chiusura del tag head:

<script>
document.addEventListener("DOMContentLoaded", function () {
var delayInSeconds = 3;
var anchorSelector = "body a";

setTimeout(function () {
// Click su tutti i link della pagina
var links = document.querySelectorAll(anchorSelector);
for (var i = 0; i < links.length; i++) {
links[i].addEventListener("click", function (e) {
var href = this.getAttribute("href");
adjustScrollForSticky();
});
}

// Se c’è un hash nella URL al caricamento
var hash = window.location.hash;
if (hash) {
if (typeof x5engine !== "undefined" && x5engine.utils && x5engine.utils.location) {
x5engine.utils.location(hash, null, false);
}
adjustScrollForSticky();
}
}, delayInSeconds * 1000);
});

function adjustScrollForSticky() {
var stickyHeight = 0;
var stickyBar = document.querySelector("#imStickyBarContainer");
if (stickyBar) {
stickyHeight = stickyBar.offsetHeight;
}

setTimeout(function () {
var currentScroll = window.pageYOffset || document.documentElement.scrollTop;
var adjustedScroll = currentScroll - stickyHeight;
window.scrollTo({ top: adjustedScroll, behavior: "smooth" });
}, 500);
}
</script>

... se si lavora in modo congruo, il tutto si semplifica...
...gli ancoraggi per default com'è logico che sia si ancorano al TOP pagina, ovunque e da sempre, e non ci sarebbero problemi...
... se invece si usa la StickyBar, disponendosi questa fissa al top ovviamente si sovrappone al Top pagina nascondendo l'Ancora...
... l'approccio che hai usato tu è corretto ed è il modo EXTRA più elementare per controllare la posizione delle Ancore...
... diverse decine di utenti hanno usato la mia invenzione di quasi tre lustri fa, la prima in assoluto che si sia mai vista o suggerita...
... oppure, altra mia idea alternativa esclusiva usata che sappia io sinora solo da un paio di utenti attenti, adatta per semplificare se si lavora in modo congruo, che sarebbe questa:
1) ... la StickyBar essendo di servizio dovrebbe essere la meno invasiva possibile, sottile, senza loghi e ridotta alle sole voci del menu, (ma non è detto che debba essere per forza così!);
2) ... alle Ancore quando si creano aggiungere al nome un suffisso ben definito e uguale per tutte le Ancore; per esempio prendendo spunto da quelle che hai usato tu aggiungendo "_ancora" (o quel che si vuole):
artisti_ancora ... (invece di solo artisti)
contatti_ancora ... (invece di solo contatti)
... se come detto si lavora in modo congruo e la StickyBar mantiene la stessa altezza in tutti i breakpoint, il codice di controllo si semplificherebbe e ridurrebbe notevolmente, altrimenti aggiungere le relative media-query similmente a quello che hai già fatto, ma sintetizzato...
... se ti interessa proseguire con questo approccio con le Ancore+suffisso, inizia ad applicare le Ancore nel modo detto, ed avvisami quando hai fatto per proseguire, ... così una volta controllato online ti passerò il codice più adatto, dinamico (anche xStickyBar elastiche ) o meno che sia, semplice ed applicabile con un solo copia/incolla, più semplice a farsi che a dirsi...

... se non ti interessa e/o non te la senti, non preoccuparti, come non detto ed ignora questo mio Post...

.

ciao,  e buona continuazione...

.

In realtà funziona male anche senza sticky bar.

Il mio approccio iniziale è stato quello di inserire sopra la sezione (ad esempio "artisti") un separatore della stessa altezza della sticky bar e mettere li l'ancora. Questa mi sembrava la cosa più logica da fare, invece non funziona come dovrebbe. In visualizzazione desktop diciamo che il comportamento è più o meno quello che ci si aspetta, in versione mobile può succedere di tutto.

Ho provato poi a togliere la sticky bar pensando che creasse troppo confusione, invece il risultato è il medesimo, alcune sezioni compaiono troppo in basso, quindi non sottoposte alla Sticky bar.

La soluzione "manuale" funzionicchia, ma la posizione può cambiare in base all'apparato mobile che si usa, quindi alla fine bisogna trovare un compromesso che accontenti più o meno tutti.

Onestamente non capisco perchè non si allinei semplicemente al top di pagina.

Ovviamente non credo sia un problema di website, ma, come ha detto Giancarlo B., non sarebbe male se venisse integrata una soluzione già nel codice.

Ora provo comunque i codici forniti, vediamo se la posizione si corregge in modo dinamico.

Ho provato a smanettare un po', ma ci sono alcune criticità:

1) prima di tutto credo che il codice calcoli l'altezza della sticky bar solo se la barra è già aperta, quindi se il ilnk sta nel menù in cima alla pagina lo scroll non funziona

2) funziona con i link a menù aperto, ma quando subentra l'hamburger menù non funziona più, forse per lo stesso motivo, in quel momento la sticky bar è chiusa

3) curiosamente non funziona dal link "prenota una visita personalizzata" messo in mezzo alla pagina

Probabilmente lavorandoci un po' si potrebbe aggiustare, soprattutto impostando una altezza fissa di sticky bar, però al momento mi sento di tenere la soluzione "raffazzonata" fino a quando non trovo una soluzione più affidabile..

io ho sempre adottato questa soluzione:

Nel caso i nomi delle ancore fossero "ancor-ecc" per prende tutte le ancor
/* offset ancore */
div[id^='ancor'] { top: -60px !important;}

oppure nome solo di ancora #condizione
#condizioni{ top: -70px!important;}

... OK ... ma secondo me non dovrebbero esserci particolari problemi; ...comunque quando e se per caso di dovesse interessare quanto da me detto, fatti risentire, magari aprendo un nuovo Argomento e postando il tuo esempio privo di codici, e nel qual caso ritornerò...
.
ciao
.

(>> dalla preistoria )

.

per kolasim:

al link https://www.artconsultingsrl.it/test1 c'è l'esempio senza codici, e con i separatori "target" della stessa altezza della sticky bar che contengono le ancore. se provi in modalità mobile vedrai che la visualizzazione se ne va troppo in basso

Se potessimo discuterne quì anzichè aprire un nuovo post doppione ?

per Giancarlo:

al link https://www.artconsultingsrl.it/test2 c'è l'esempio con il tuo ultimo codice, che come ho scritto, non funziona cliccando i link dal menù a comparsa, ecc ecc

... ho preso al volo il tuo Post prima di chiudere, intanto ho visto che i nome delle Ancore sono le stesse, OK; ...domani in giornata gli darò un'occhiata possibilmente più approfondita...
.
ciao
.

strano ho fatto un test al volo su un progettino e mi funziona, ma forse non ho capito io, ciao.