In questa guida andremo a vedere come puoi creare un anchor link con scroll attraverso la piattaforma FRAMEWORK360.
Cos’è un Anchor link scroll?
Gli Anchor link scroll sono dei link, delle voci, presenti nella pagina o all’interno del menù che se cliccati effettuano uno scroll scendendo fino ad una sezione specifica.
Ora adiamo a vedere in pochi semplici step come poi creare i tuoi anchor link con la piattaforma FRAMEWORK360.
Step 1: Aggiungiamo un menù all’interno della pagina
La prima cosa da fare sarà quella di inserire un menù all’interno della pagina che possiamo popolare con delle voci che se cliccate faranno scendere la pagina fino alla sezione che desideriamo visualizzare.
Per esempio, potremmo creare un Header, ovvero, una sezione che vogliamo ripetere su tutte le pagine del nostro sito.
Per creare il nostro Heater dovemmo recarci nel menù principale di FRAMEWORK360 ed andare nelle seguenti voci:
Contenuti > Blocchi Globali
All’interno della voce Blocchi Globali andremo a creare un blocco selezionando la tipologia di blocco Header come mostrato in figura:
Bene ora abbiamo creato il nostro Header, non ci resta che aggiungere il nostro menù all’interno dell’Header creato.
Per prima cosa dovremmo cliccare sulla voce Trascina un contenuto presente nel nostro Header.
Ora ci apparirà la schermata in cui possiamo scegliere il blocco da inserire, noi sceglieremo il blocco Navbar e lo trascineremo all’interno.
Una volta trascinato il blocco Navbar andremo a selezionare il menù, precedentemente creato, da inserire all’interno del blocco.
Step 2: Aggiungiamo le voci all’interno del nostro menù
Per andare ad aggiungere le voci all’interno del nostro menù dovremmo accedere alla voce Menù del menù principale della piattaforma FRAMEWORK360 e andare ad accedere al menù che abbiamo nello step precedente selezione all’interno del Navbar.
Bene, ora siamo all’interno del menù che vogliamo popolare. Ora andremo ad inserire all’interno del menù i nostri Anchor link.
IMPORTANTE!
Nella creazione dell’ancor link ci viene richiesto di inserire un link (come mostrato in figura), qui dovremmo inserire il link della sezione a cui il link ci deve riportare, il link deve essere anticipato dall’inserimento del #.
La scelta del nome che compone il link è a nostro piacimento, nel nostro esempio abbiamo utilizzato il seguente link: #sezione-1.
Tieni a mente il link che stai inserendo in quanto questo link ci servirà nuovamente al prossimo step!
Una volta inserito tutti gli Anchor link di cui necessitiamo non ci resta che salvare.
Step 3: Colleghiamo l’Anchor link alla sezione
Una volta creato il nostro link per completare il processo dobbiamo fare in modo che nel momento in cui si clicca sul link la pagina effettui uno scoll fino ad arrivare alla sezione da noi desiderata.
Per fare dobbiamo recarci sulla pagina e cliccare sulla rotellina della riga della sezione che vogliamo collegare il nostro Anchor link come mostrato in figura:
Ora siamo entrati nel menù che ci permetterà di modificare la riga da noi selezionata. Dovremmo andare sulla sezione Design, una volta dentro la sezione Design scendiamo nel menù fino Attributi dove troveremo la voce ID Elemento. Ricapitolando dovrai seguire i seguenti passaggi:
Design > Attributi > ID Elemento
A questo punto dobbiamo inserire all’interno della voce ID Elemento lo stesso link che nel passaggio precedente abbiamo inserito per la creazione dell’Anchor link, anche in questo caso il link deve essere anticipato dal #. Nel nostro esempio ricordiamo che il link era il seguente: #sezione-1.
Ora il gioco è fatto!
Abbiamo creato il nostro Anchor link scroll, quindi, ogni volta che clicchiamo sul link presente nella Header la pagina effettuerà un scroll fino alla sezione da noi desiderata.
