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.