Funzione che non agisce da link testuale

[Gas75]

Salve, ho cercato di risolvere questo problema di posizionamento della pagina al click su link interni https://forum.html.it/forum/showthre...readid=2972833 via CSS, non trovando tuttavia una soluzione comoda e compatibile con tutti i principali browser.
Ho quindi perseguito la via di JavaScript, imbattendomi nel comando scrollBy(), che su w3schools è applicato a button mentre a me serve su link testuali, abbassando la destinazione del link di 86 px che è l'altezza della navbar fissa delle pagine.
Purtroppo questo codice resta completamente ignorato.

<a class="elenco_autori" href="#link1" onclick="javascript:scrolla();">Link 1</a>

<script>
function scrolla() {
    window.scrollBy(0, 86);
}
</script>

Ho collocato la function in fondo al body anziché nell'head (seguendo l'esempio di w3schools, ma senza risultato.
Cosa non va?

[cavicchiandrea]

onclick="scrolla();return false;"

return false per bloccare il href

[Gas75]

Perché dovrei bloccare href?? Io voglio che vada nel blocco avente id="link1" ma calato di 86 px per non finire sotto alla navbar fissa.

---

Risolto in CSS, con una classe che fa un padding-top adeguato.

[KillerWorm]

Purtroppo questo codice resta completamente ignorato.

Ciao, no, non viene ignorato, più precisamente quella funzione che hai richiamato al click viene eseguita poco prima che avvenga l'azione di default del click su quel link. In altre parole, l'effetto di quello script avviene istantaneamente, nel momento in cui fai click sul link, quindi la pagina scrolla di 86px anche se non c'è alcun effetto visivo perché subito dopo avviene (per ultima) l'azione di default che riporta lo scroll al suo regolare valore, relativo alla posizione del target di quell'ancora.

A conti fatti, la pagina va a posizionarsi esattamente sul relativo target, secondo l'effetto dell'ultima azione (quella di default). Il codice quindi non è "ignorato" ma il suo effetto è "annullato" (se così possiamo dire) dall'azione di default.

Cosa non va?

Quello che non va è il procedimento delle azioni eseguito esattamente al contrario rispetto a come ti aspettavi.

return false per bloccare il href

Il "return false" impedisce che sia eseguita l'azione di default ma ovviamente non è sufficiente a risolvere il problema perché in quel modo avviene, sì, lo scorrimento di 86px ma senza considerare il valore relativo alla posizione del target (che chiaramente è necessario per determinare il valore finale), il quale normalmente verrebbe determinato dall'azione di default.

In questo caso otterresti lo stesso effetto di un button in quanto questo non possiede ovviamente un'azione di default che determina lo scorrimento della pagina; avrai quindi solo uno scorrimento di 86px rispetto alla posizione attuale.



PS: a prescindere dal fatto che così non funziona, il valore di scrollBy dovrebbe essere negativo (cioè -86), non positivo, perché ovviamente dovrebbe essere sottratto al normale valore dato dallo scorrimento di default.

EDIT:
aggiungo una possibile soluzione. Tieni conto che preferisco evitare in tutti i modi gli interventi invasivi che vanno a pasticciare il codice HTML, per cui uso un po' di jQuery (dal momento che è presente sul tuo sito, da quel che ho visto) in modo da applicare un gestore per l'evento click direttamente da script, lasciando puliti i tag <a>, quindi non hai chiaramente bisogno di applicare l'attributo onclick.

Puoi mettere questo script alla fine del body, ovviamente dopo l'inclusione di jQuery:

$('a[href^="#"]').click(function(e){
    scrollOn(this.hash);
    e.preventDefault();
});
function scrollOn(a){
    location.hash = a;
    window.scrollBy(0, -86);
}
$(function(){if (location.hash) scrollOn(location.hash);});

questo non fa altro che applicare un gestore per tutti i link con href che inizia per "#" (cioè le ancore interne in cui viene definito l'hash a cui puntare). L'azione di default è chiaramente annullata ma lo scorrimento viene forzato dallo script applicando il location.hash con il relativo hash del link, quindi lo scorrimento viene aggiustato con scrollBy.

Ho aggiunto anche un controllo al caricamento della pagina, in modo che se si tratta di un indirizzo con hash, avvenga quella stessa azione per aggiustare lo scorrimento... cosa che col solo onclick non potevi effettuare.

Ho fatto poche prove, magari fai tu gli opportuni test per verificare se sui vari browser/dispositivi, funzioni come vorresti.

[Gas75]

Il buon vecchio JavaScript rimane lo strumento lato client più universale in fatto di compatibilità coi vari browser, infatti ha risposto bene su tutti i browser sia pc che smartphone testati.
Grazie per il prezioso aiuto! Mi studierò comunque il tuo script dato che con jQuery non ho particolare confidenza, lo uso perché serve a Bootstrap.

[KillerWorm]

Grazie per il prezioso aiuto! Mi studierò comunque il tuo script dato che con jQuery non ho particolare confidenza

Figurati Tieni presente che ho usato jQuery solo per snellire alcuni passaggi nell'assegnare l'evento click opportunamente alle varie ancore interne e nella definizione della funzione che viene lanciata quando la pagina è pronta; ma è chiaro che il tutto potrebbe essere rielaborato in puro JavaScript.

Mi fa piacere comunque che funzioni sui vari browser/dispositivi

[Gas75]

Segnalo una piccola anomalia al codice: se scorro la pagina senza usare i link del menù e poi voglio tornare in cima, il previsto link "Torna su" mi fa salire la pagina di 86 px...
C'è un modo per escludere quei link?

[KillerWorm]

Assicurati che l'hashtag, al quale punta quel link, sia presente come id nel documento.

Ad esempio se hai <a href="#top"> puoi mettere l'id nel body <body id="top">.

Altrimenti prova a non mettere alcun hashtag e lasciare il link solo col cancelletto <a href="#">. Questo dovrebbe far azzerare il valore dello scroll.

[Gas75]

I riferimenti dei link furono tutti cambiati da name a id, quindi anche "top" è così.
Lasciando soltanto #, il click esegue soltanto il salto di 86 px.

Analizzando meglio il problema, l'anomalia pare più complessa e provo a descriverla: lo script mi riporta correttamente all'id=top se ho scrollato la pagina e raggiunto un "Torna su" o se mi sono mosso tramite link del menù interno e poi usato un "Torna su" qualunque anche scrollando tra due schede della pagina. In altre parole se nella query string c'è già #top, lo script ignora il tag e fa soltanto il salto di 86 px.

C'è anche un'altra stranezza rilevata da smartphone: i link che puntano a un hashtag di un'altra pagina non sono precisi, cioè la pagina si carica ma quasi subito fa uno scatto e scende...

[KillerWorm]

Inizio a capire dove può essere il problema ma ho bisogno di verificarlo nella tua pagina. Puoi postare il link?