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.

Non capisco se ho qualche elemento che da fastidio nel mio esempio, ma c'è poco e niente.. se provi il mio esempio in modalità mobile vedrai che il tuo script non funziona, ora provo a modificarlo togliendo il recupero dell'altezza della sticky bar, tanto è uguale a tutte le visualizzazioni..

Se vuoi ti mando il progettino che ho fatto 

ok, così controllo quali differenze ci sono

bene clicca su questo link e scivimi così ti mando il progettino.

... rimando a quanto detto in precedenza, non dovrebbero presentarsi problemi con le Ancore...
... personalmente avrei preferito un Topic a parte solo per evitare frammentazioni e fraintendimenti, comunque procederò qui...

... solo a titolo informativo le Ancore furono introdotte circa sette lustri fa per gli ipertesti, ovvero per pagine ben definite, create appositamente per questo scopo e prive di effetti o animazioni, e da allora la logica è rimasta invariata...

... fuori da questo schema può cambiare tutto: c'è pagina e pagina, ed effetti ed effetti, che non possono essere predefiniti o rilevati automaticamente, soprattutto se vengono generati o modificati dinamicamente...

... questo concetto va compreso e tenuto bene a mente...

... è un po’ come se un aereo, durante l’atterraggio, si trovasse improvvisamente la pista spostarsi di qualche metro avanti: pur avendo impostato la traiettoria corretta, atterrerebbe fuori zona, con conseguenze potenzialmente dannose, e questo, chiaramente, non deve succedere; ...in alcuni Topic sono dovuto intervenire personalmente per rimediare a situazioni apparentemente complicate specialmente per chi si era affidato all'IA(!)...

...per quanto riguarda gli Ancoraggi, come accennato possono verificarsi molti casi diversi, con variabili ambientali completamente differenti, che devono essere analizzate una per una...

...adesso, per farti un’idea, questi sono gli ultimi due Topic (tra le decine a cui ho partecipato) in cui si parla sempre di Ancore, ma in ambienti e situazioni non comparabili né tra loro, né con altri casi, e quindi neanche col tuo caso:
https://helpcenter.websitex5.com/es/post/270519
https://helpcenter.websitex5.com/es/post/271705

... in conclusione non c'è programma che tenga; ...se si costruiscono pagine "pulite", con testi e immagini posizionati in modo chiaro e definito, senza effetti, rallentamenti, o animazioni, insomma una "pagina normale", il Programma è in ordine e non ci saranno mai problemi con le Ancore, e neppure con gli Ancoraggi da terza pagina, che rappresentano di solito il caso più complicato e/o poco compreso...

... mi son permesso questa mia estemporanea, ...non serve e non preoccuparti a rispondermi, ...se ti è interessato, bene, altrimenti ignora pure...

... se posso tornerò con le novità dopo che avrò controllato il tuo esempio /test1/...

.

... analizzando, ... ... i separatori che vedo sono un pseudo rimedio, antiestetici; portano via spazio inutilmente a discapito della Pagina...

... al loro Posto, e solo se si fa uso della StickyBar, si può usare una piccola stringa di codice CSS di quelle del Topic che ti ho indicato prima (preistoria) che sarebbe la soluzione migliore alla portata di tutti, elementare, facile, sicura ed indolore...

... continua ... ... ... 

.

... per me sarebbe stato molto più semplice se applicavi il suffisso alla Ancore nel modo che avevo detto prima, così potevo dimezzare il mio codice in base all'idea da sviluppare...

... comunque, venendo adesso alla situazione reale del tuo esempio attuale online "/test1/" comprensivo di StickyBar e separatori, hai la sezione ARTISTI elastica, non definita, ed anche la pagina perde i riferimenti avendo applicato effetti sull'apertura del menu hamburger, il che non si può definire una situazione "normale"...

... ho fatto una simulazione alla carlona, ottenendo questo:

... verifico nuovamente e ti farò sapere...

.

... nota: ...come indicato anche dallo stesso commento nella prima riga del codice attivo, se vuoi provare una variante eliminando i separatori attuali che ho nascosto via codice, elimina anche la prima riga, cioè questa:
$("#pluginAppObj_48,#pluginAppObj_49,#pluginAppObj_50").hide(); // se si eliminano i separatori attuali allora eliminare tutta questa riga;

.

ciao

.

Ho letto con interesse una buona parte della "letteratura" riguardante le ancore.

Pur comprendendo il discorso della "dinamicità" delle pagine, oggi purtroppo (o per fortuna) la dinamicità è essenziale per rendere meglio fruibili i contenuti web su tutta la vastità di apparati in commercio.

Ho provato il tuo codice, che ovviamente funziona alla grande, sull'esempio www.artconsultingsrl.it/test3 

ho solo aggiunto un -1 poichè a volte da mobile compariva una riga nera dell'elemento precedente ad "artisti".

Ovviamente ho tolto anche gli elementi separatori che erano solo messi li per far capire il problema.

Grazie come sempre per la disponibilità

...

... OK ... direi ottimo; ... ho controllato il nuoco /test3/ per valutare eventuali discordanze, appparentemente tutto rebolare, funziona a dovere, e ti ringrazio anche per la tua verifica positiva ed apprezzamento...

.

ciao

.

... intanto che c'ero, per curiosità ho visto il tuo esempio /test2/, che così com'è il codice EXTRA che hai inserito mi pare inerte o inadatto per gli scopi che ti sei prefisso; ...potrebbe funzionare forse per una di quelle da me dette "pagine normali"...

... ho notato che stranamente in /test2/ l'oggetto "livelli" è diverso da /test1/...

... quindi facendo una verifica istantanea proprio ora, ed assegnando il valore relativo alla variabile menuAncoraK [menuAncoraK = $(".label-inner-wrapper .label");], lo stesso mio codice funzionerebbe anche in /test2/ ... non entrando in conflitto con l'attuale codice, che comunque nel caso dovresti sempre eliminare...

.

ciao

.

diciamo che la struttura corretta è quella di test3, test1 e test2 erano esempi per verificare i suggerimenti tuoi e di Giancarlo. 

Sicuramente è un argomento che meriterebbe altri test, ma per ora, risolto il problema imminente, va di lusso così.

Grazie ancòra (àncora) !

... OK ... ciao ...

...+... ... dimenticavo, ... potrebbe interessarti in futuro,  se per caso aggiungerai nel menu pagine normali ai livelli Ancorati, in quanto potrebbe essere necessaria un'integrazione al codice per il controllo degli ancoraggi da terza pagina...

... quando e se per caso ti dovesse interessare magari ci rivedremo in un NUOVO Argomento...

.

Questo è sicuramente interessante, magari nei prossimi giorni apro un nuovo topic con un esempio pronto all'uso. 

... OK ... di qua esco ... ciao e buon lavoro ...

.