In deze gids gaan we bekijken hoe je een anchor link met scroll kunt maken via het platform FRAMEWORK360.
Wat is een Anchor link scroll?
Anchor link scrolls zijn links, items, die op de pagina of binnen het menu aanwezig zijn en wanneer erop geklikt wordt, zorgt voor een scroll naar een specifieke sectie.
Laten we nu in een paar eenvoudige stappen bekijken hoe je jouw anchor links kunt maken met het FRAMEWORK360-platform.
Stap 1: Laten we een menu toevoegen aan de pagina
Het eerste wat we moeten doen is een menu toevoegen aan de pagina dat we kunnen vullen met items die, wanneer erop geklikt, de pagina laten scrollen naar de sectie die we willen weergeven.
Bijvoorbeeld, we zouden een Header kunnen maken, dat wil zeggen, een sectie die we op alle pagina's van onze site willen herhalen.
Om onze Header te maken, moeten we naar het hoofdmenu van FRAMEWORK360 gaan en naar de volgende items:
Inhoud > Globale Blokken
Binnen de sectie Globale Blokken gaan we een blok creëren door het type blok Koptekst te selecteren zoals weergegeven in de afbeelding:
Goed, nu hebben we onze Koptekst gemaakt, we hoeven alleen nog maar ons menu toe te voegen binnen de gemaakte Koptekst.
Als eerste zouden we moeten klikken op de optie Sleep een inhoud die aanwezig is in onze Koptekst.
Nu verschijnt het scherm waarin we de blok kunnen kiezen die we willen invoegen, wij zullen het Navbar blok kiezen en het naar binnen slepen.
Zodra we het Navbar blok hebben gesleept, gaan we het menu selecteren dat eerder is aangemaakt om in het blok in te voegen.
Stap 2: Laten we de items aan ons menu toevoegen
Om de items aan ons menu toe te voegen, moeten we toegang krijgen tot het item Menu van het hoofdmenu van het FRAMEWORK360-platform en naar het menu gaan dat we in de vorige stap hebben geselecteerd binnen de Navbar.
Goed, nu zijn we binnen het menu dat we willen vullen. Nu gaan we onze Anchor-links in het menu invoegen.
BELANGRIJK!
Bij het maken van de ankerlink wordt ons gevraagd om een link in te voeren (zoals weergegeven in de afbeelding), hier moeten we de link invoeren van de sectie waarnaar de link moet verwijzen, de link moet voorafgegaan worden door het invoeren van #.
De keuze van de naam die de link vormt is naar onze voorkeur, in ons voorbeeld hebben we de volgende link gebruikt: #sectie-1.
Vergeet niet de link die je invoert omdat deze link ons opnieuw zal helpen bij de volgende stap!
Eenmaal alle Anchor-links die we nodig hebben zijn ingevoerd, hoeven we alleen nog maar op te slaan.
Stap 3: We koppelen de ’Anchor link aan de sectie
Nadat we onze link hebben gemaakt, moeten we ervoor zorgen dat wanneer op de link wordt geklikt, de pagina naar beneden scrolt om bij de gewenste sectie te komen.
Om dit te doen, moeten we naar de pagina gaan en klikken op het tandwieltje van de rij van de sectie waaraan we onze Anchor-link willen koppelen, zoals weergegeven in de afbeelding:
Nu zijn we het menu binnengekomen dat ons in staat zal stellen de geselecteerde regel te wijzigen. We moeten naar de sectie Ontwerp, eenmaal binnen de sectie Ontwerp scrollen we in het menu naar beneden tot Attributen waar we de optie ID Element zullen vinden. Samenvattend moet je de volgende stappen volgen:
Ontwerp > Attributen > ID Element
Op dit punt moeten we binnen de optie ID Element dezelfde link invoeren die we in de vorige stap hebben ingevoerd voor het aanmaken van de Anchor-link, ook in dit geval moet de link voorafgegaan worden door een #. In ons voorbeeld herinneren we ons dat de link als volgt was: #sectie-1.
Nu is het spel è gedaan!
We hebben onze Anchor link scroll gemaakt, dus elke keer dat we op de link in de Header klikken, zal de pagina naar de door ons gewenste sectie scrollen.
