Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 16
  1. #1

    Funzione che non agisce da link testuale

    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.
    codice HTML:
    <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?
    Ultima modifica di Gas75; 05-05-2020 a 19:46

  2. #2
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,028
    codice:
    onclick="scrolla();return false;"
    return false per bloccare il href
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  3. #3
    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.
    Ultima modifica di Gas75; 05-05-2020 a 22:04

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,726
    Quote Originariamente inviata da Gas75
    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.

    Quote Originariamente inviata da Gas75
    Cosa non va?
    Quello che non va è il procedimento delle azioni eseguito esattamente al contrario rispetto a come ti aspettavi.

    Quote Originariamente inviata da cavicchiandrea
    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:
    codice:
    $('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.
    Ultima modifica di KillerWorm; 05-05-2020 a 23:23
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  5. #5
    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.

  6. #6
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,726
    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
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  7. #7
    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?

  8. #8
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,726
    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.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  9. #9
    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...

  10. #10
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,726
    Inizio a capire dove può essere il problema ma ho bisogno di verificarlo nella tua pagina. Puoi postare il link?
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.