Abbiamo visto come con javascript possiamo intercettare degli eventi e poter interagire quindi con la pagina e poter anche rispondere a quelle che sono le interazioni dell'utente gli eventi dell'utente quella pagina.

In questo caso proviamo ad implementare una funzionalità tanto semplice quanto utile.

Ovvero potremmo andare a inserire un backstop button messo non lo so, tipo in basso a destra, quindi flottante nel layout che suggerisce.

Quindi all'utente quando scrolla fornirà un modo per ritornare immediatamente in cima alla pagina.

Quindi appunto beck, tu top in questo caso, quindi comincerei con la creazione dell'elemento nel nostro mark.

Andiamo sulla sull' index html creiamo, creiamo un divano a cui daremo classe chiamiamolo beck tu top mi sembra che abbia senso.

Questo elemento andrà stilato nel css con la relativa classe.

Ok questo elemento CSS andremo a sfilarlo con la relativa classe e comincerei dandogli un'immagine di background l'idea è quella di creare lo so, un pulsante che abbia insomma i bordi arrotondati arrotondati.

Magari facciamo un cerchio con una freccia verso l'alto e quindi un'immagine png trasparente da inserire al centro, per cui comincerei a inserire proprio la nostra background, ma che ho già provveduto a caricare tra i file del tra i file delle nostre immagini.

Quindi dentro la cartella immagini che adesso provvedo a portarla.

Quindi ben grandi manager srl e tra pc impostiamo il papà quindi immagino slash rov up punto png sta usando una png perché supporta la trasparenza.

A me interessava soltanto l'immagine della freccia che adesso vedremo comparire e cominciamo anche a stilare il box che conterrà questa freccia.

Diamogli per esempio una dimensione, ma ipotizziamo una si' a un'altezza che una larghezza di cinquanta pixel per esempio.

In questo modo ormai abbiamo capito che potremmo arrotondare i bordi e farlo diventare un cerchio.

Salviamo e ricarichiamo ok, vediamo come il mio pulsante in questo momento è comparsa in una posizione a caso e in fondo alla pagina la freccia ripetuta più volte dobbiamo ancora applicare delle correzioni, quindi vediamo se ci ricordiamo per esempio come cambiare il posizionamento.

Io direi che in questo caso un po' come come con lehder che sempre fisso all'interno del newport, questa freccia potrebbe essere sempre fissa in basso a destra, quindi cambierà il position in fixed e appunto se metterei le coordinate rispetto al newport di in questo caso bottom proviamo un dieci pixel, quindi dal basso dal fondo della del newport é un right di ma proverei venti pixel.

Vediamo vediamo salviamo, vediamo il risultato ricarico.

Okay, beh, direi che la posizione non è male, forse qualche pixel un po' più in alto però dovrebbe funzionare, quindi proviamo un trenta e un trenta salviamo ok, ovviamente ancora non ha l'aspetto di un pulsante.

Innanzitutto il background e ripetuto, per cui applicherò delle proprietà per cercare di risolvere questo problema.

Ah, ci aiuta quindi la proprietà background threepeat col valore non retweet e mentre ci sono potrei anche decidere di centrare quindi la mia immagine che mi fa da background centrarla verticalmente orizzontale orizzontalmente rispetto al dv che appunto la contiene.

In questo caso utilizzerò background position e indicherò center center, ovvero due valori per indicare centrato sull'asse delle x è centrato sull'asse delle y, salvo ricarico ed ecco che adesso il nostro pulsante ha appunto un'unica freccia al centro ancora manca uno sfondo e poi i bordi arrotondati.

Per cui penso che come sfondo potremmo utilizzare lo stesso sfondo che stiamo utilizzando lo stesso colore di sfondo che stiamo utilizzando per i pulsanti, quindi questo questo viola ok questo perfetto.

Aggiungo quindi la proprietà background-color per specificare il colore del il colore dello sfondo.

Okay, è il collo il mio esadecimale salvo ricarico bene un quadrato cosa resta? Resta a dargli un bordo.

In questo caso ci aiuta la proprietà border-radius in cui basterà in questo caso gestire semplicemente la misura in percentuale.

Io voglio dei bordi del cinquanta percento arrotondati.

Questo mi darà farà in modo che l'effetto che otterremo sarà quello di un di un cerchio.

Quindi da quadrato abbiamo ottenuto una figura geometrica differente.

Perfetto.

Adesso in basso abbiamo il nostro pulsante giusto.

Come ultimo dettaglio aggiungerei anche un cursor pointer per indicare al browser che quando vado col mouse sopra questo tasto voglio che compaia la manina.

Così è più esplicito che sia qualcosa da cliccare per cui abbiamo creato il nostro elemento.

Adesso aggiungiamo la logica per la logica useremo già scritto quindi in portero' un nuovo fai nel mio progetto apro la il pannello con tutti i file di progetto crea un nuovo e lo chiamerò e lo chiamero' script punto geas bene e non mi resta che importarlo nel mio index html, in questo caso come posizione ideale.

Sfruttero' è esattamente la riga prima del test di chiusura del body è buona norma inserirli dentro i file javascript perché senza dilungarci troppo su come il browser e elabora quindi gergo file passing della dei tag della pagina e carica tutti i falchi incontra, compresi quelli di stile anche.

Diciamo che è una forma di ottimizzazione inserire gli scrip sempre prima della chiusura del tag body, quindi creerò un un tag script nel cui source puntero' al mio script punto j s perfetto.

Facciamo giusto una prova andiamo subscription cioè, il punto è che andiamo su script punto j s.

Inseriamo un console long con e l'ho scritto salviamo torno nel browser, apre i miei strumenti di sviluppo e mi aspetto che nella console dove viene loggato il javascript compare appunto la mia stringa e lo script perfetto.

Quindi il nostro script è caricato in pagina.

Quindi cominciamo a lavorarci.

La prima cosa che faccio è tornare sul sull' index html.

In questo caso possiamo spostare i pannelli così vediamo tutto in maniera parallela.

Chiudiamo, chiudiamo il pannello laterale della alberature di progetto e mettiamo in parallelo sia html già scritto.

Ok, quindi la prima cosa che farò è aggiungere al mio al mio tag, al mio ID del pulsante back to toc ho detto di pd eh? Aggiungere al mio dive del pulsante back to toc umidi specifico che userò per recuperarlo in javascript per recuperare l'elemento in Giava scritto chiamiamolo back button back btn dai, direi che va bene, quindi con questo ed adesso torno nel mio script e lo assegna una variabile, così potrò utilizzarlo.

È anche più volte e questa variabile la chiamerei un po' come lei di back.

But quindi faro' concept back button uguale document getelementbyid id e inserisco appunto, li dico appena aggiunto ok, ho recuperato un elemento e adesso prova ad agganciare un lista nera.

A quel punto in questo caso quindi, richiamo tramite variabile il mio back button e invocherò ad event lissner dove come primo parametro specifiche rough il nome dell'evento che voglio intercettare.

Quindi un click e come secondo parametro la funzione che conterrà il mio codice da seguire ad ogni click dell'utente a scopo di the bug.

Aggiungo adesso una stringa in un console l'ok per vedere se l'evento agganciato correttamente.

Quindi console punto log mettiamo hai hai cliccato okay salviamo, ricarichiamo la pagina ok, clicca sul pulsante ok, vediamo come console compare più volte, cioè un counter che incrementa e i miei cliccato.

Quindi l'evento è agganciato.

Cosa faccio adesso? Inseriro' all'interno della funzione che verrà invocata al click il codice che mi consentirà di riportare la finestra allo scroll iniziale.

Quindi all'inizio della pagina.

Utilizzerò in questo caso una funzione Windows script.

Tu dove all'interno come parametri accetterà le coordinate della posizione a cui vorrei che la finestra crollasse.

In questo caso mi basta esplicitare zero e zero perché vorrei che tornasse in cima.

Quindi Windows script zero zero.

Quindi le coordinate iniziali, salvo ricarico la pagina è cliccando sul pulsante vedo come la pagina ritorna alla posizione iniziale.

Quindi ho comandato governato lo skrull con JavaScript per ritornare alla posizione iniziale e devo dire che una funzionalità utile così l'utente man mano che naviga può decidere di ritornare rapidamente in cima in qualunque momento.

C'è ancora qualcosa che non mi convince, però vediamo se possiamo migliorare questa implementazione.

Il pulsante è sempre presente e sinceramente, quando sei già in cima, non ha molto senso che compaia in quel in quel caso cosa potrei fare? Potrei agganciarmi a un altro evento a questo punto che è quello appunto dello scrolling e decidere di far apparire il pulsante soltanto quando l'utente ha scrollato e le coordinate dello scroll quindi um sono superiori allo zero.

Quindi capisco che l'utente non è in cima, quindi verificherò le coordinate rispetto all'asse y della pagina e a quel punto deciderò se fare apparire o meno il pulsante.

Quindi torno sul mio codice.

In questo caso aggancerà o il mio listener direttamente all' oggetto windows che appunto rappresenta la finestra che sto scrollando.

Quindi wind ad event listener il primo parametro l'evento, per cui sarà in questo caso scroll e nella funzione associata che viene chiamata anche funzioni di callback.

A quel punto comincerò a fare un po' di ragionamenti.

Cosa potrei fare? Potrei innanzitutto salvarmi in una variabile, quindi mettiamo un l'etna post y, quindi position y la chiamo così la posizione appunto lungo l'asse y dello scroll della mia della mia finestra a cui posso accedere con la proprietà fruendo punto scroll y è una proprietà di sola lettura che mi dice quindi la posizione inps di quanto la finestra è scrollata in verticale avendo questo valore.

Quindi posso decidere se è maggiore di zero andare a mostrare il pulsante altrimenti il contrario.

Cosa useremo? Useremo un'istruzione condizionale, quindi inseriremo delle condizioni con il tag iff dove verificheremo se la posizione è maggiore di zero.

Quindi IeFP post y é maggiore di zero.

In quel caso mostreremo il pulsante altrimenti quindi è l's.

Lo nasconderemo ora prima di lavorare di lavorare sul codice che utilizzeremo per nascondere un mostrare il pulsante.

La prima cosa che farò è ritornare sul css e nasconderlo di default, perché è il suo stato iniziale, quindi potrei benissimo tornare su la classe backstop aggiungere la regola display in questo modo nasconde il pulsante ricarichiamo e vediamo che il pulsante effettivamente sparito.

Quindi cosa farò adesso? All'interno della prima condizione che sto per verificare.

Quindi se fifth position y è maggiore di zero, a quel punto io deciderò di far comparire l'elemento l'elemento l'abbiamo già catturato prima in una variabile.

Se ci ricordiamo Colgate Elements quindi è conservato all'interno della variabile back button e di back button.

Cosa manipolare o manipolare? O stai punto display manipolò la sua proprietà display per valorizzarla con block, quindi faro' ritornare visibile l'elemento di contro nels quindi nella seconda parte della mia condizione se non si verifica questa no, quindi nella seconda, nel secondo blocco della mia condizione farò il contrario, quindi aspetterò il display del pulsante in Non salviamo ricarichiamo.

Quindi adesso la situazione è di scroll a zero.

Siamo in cima alla pagina.

Appena scrollo un po', ecco che il pulsante compare ritorno su è il pulsante sparisce.

Quindi abbiamo semplicemente introdotto un minimo di logica per manipolare gli elementi, verificare che determinate condizioni si verificano e di conseguenza applicare gli studi che ci interessano per mostrare o nascondere qualcosa.

E inoltre abbiamo ordinato la pagina di scrollare in alto ogni volta che l'utente.

Clicca su questo pulsante, per cui questo è solo un inizio della logica che possiamo applicare a una pagina HTML.

Ci sono tantissime altre interazioni che possiamo intercettare e con cui possiamo aggiungere animazioni o effetti piuttosto che anche delle funzionalità avanzate, e tutto questo sfruttando soltanto già scritto.