Så gör du långa accordions mer lättnavigerade
Accordions är bra för att samla ihop och strukturera stora mängder information på ett överskådligt sätt. Men är de riktigt långa kan besökaren behöva lite extra hjälp.
- När du har skapat långa accordions på din webbplats, kan det vara bra att lägga in en "hela vägen upp"-knapp som gör det lättare för dina besökare att navigera.
- Detta är också bra om du har flera flikar i en accordion och besökaren vill hoppa tillbaka till början av den aktuella fliken, inte till början av webbsidan.
- Det är även en bra idé att guida besökaren ner till rätt stycke i en lång accordion.
Allt detta kan du åstadkomma genom att använda ankarlänkar i din accordion. I några av fallen kan de kännas lite "bakvända" eftersom ankaret kommer före själva länken, men det är ändå helt vanliga ankarlänkar.
Skapa en "hela vägen upp"-knapp
För att åstadkomma en "hela vägen upp"-knapp så skapar du en "omvänd" ankarlänk:
- Lägg in ett ankare uppe på sidan med hjälp av flaggan. I exemplet nedan ligger ankaret på ordet "Start".
- Döp ankaret till något som är lätt att komma ihåg, till exempel "upp".
- Skapa länken längst ner i accordion-fälten. I det här fallet ska målet för länken vara "#upp".
- Spara.
Se exempel nedan:
Start
1 / 2 / 3 / 4
1
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam faucibus purus in massa tempor nec feugiat. Laoreet id donec ultrices tincidunt arcu non. Tempus quam pellentesque nec nam aliquam sem. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Sapien pellentesque habitant morbi tristique senectus. Libero volutpat sed cras ornare arcu dui vivamus arcu felis. Nulla facilisi morbi tempus iaculis urna id volutpat. Mi ipsum faucibus vitae aliquet nec. Ac tincidunt vitae semper quis lectus. Egestas fringilla phasellus faucibus scelerisque eleifend donec pretium.
Nullam vehicula ipsum a arcu cursus vitae congue mauris. Suspendisse ultrices gravida dictum fusce ut placerat orci. Commodo nulla facilisi nullam vehicula ipsum. Lobortis scelerisque fermentum dui faucibus in ornare quam viverra. Euismod elementum nisi quis eleifend quam adipiscing vitae. Hendrerit dolor magna eget est lorem ipsum. Augue ut lectus arcu bibendum at varius. Sagittis purus sit amet volutpat consequat mauris. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Id diam maecenas ultricies mi eget mauris pharetra. Diam sit amet nisl suscipit adipiscing bibendum. Tristique risus nec feugiat in. Mauris augue neque gravida in fermentum et sollicitudin. Lorem mollis aliquam ut porttitor leo. Nisl pretium fusce id velit. Tellus orci ac auctor augue mauris augue neque gravida in. Pulvinar mattis nunc sed blandit libero volutpat. Aliquam ut porttitor leo a.
2
Lorem ipsum
In tellus integer feugiat scelerisque varius morbi enim. Fringilla ut morbi tincidunt augue interdum. Ac odio tempor orci dapibus ultrices in. Magna etiam tempor orci eu lobortis elementum nibh tellus. Non nisi est sit amet facilisis. Purus sit amet luctus venenatis lectus magna fringilla. Mattis rhoncus urna neque viverra justo nec ultrices. Eleifend quam adipiscing vitae proin sagittis nisl rhoncus. Mi proin sed libero enim sed faucibus turpis in eu. Lacus sed viverra tellus in hac habitasse platea dictumst. Tortor posuere ac ut consequat semper viverra nam. Augue neque gravida in fermentum et sollicitudin. Potenti nullam ac tortor vitae purus faucibus. Donec et odio pellentesque diam volutpat commodo. Morbi tincidunt augue interdum velit euismod. Sed velit dignissim sodales ut eu sem integer vitae justo. Id ornare arcu odio ut sem nulla pharetra diam sit. Facilisis gravida neque convallis a cras semper auctor neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam faucibus purus in massa tempor nec feugiat. Laoreet id donec ultrices tincidunt arcu non. Tempus quam pellentesque nec nam aliquam sem. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Sapien pellentesque habitant morbi tristique senectus. Libero volutpat sed cras ornare arcu dui vivamus arcu felis. Nulla facilisi morbi tempus iaculis urna id volutpat. Mi ipsum faucibus vitae aliquet nec. Ac tincidunt vitae semper quis lectus. Egestas fringilla phasellus faucibus scelerisque eleifend donec pretium.
Nullam vehicula ipsum a arcu cursus vitae congue mauris. Suspendisse ultrices gravida dictum fusce ut placerat orci. Commodo nulla facilisi nullam vehicula ipsum. Lobortis scelerisque fermentum dui faucibus in ornare quam viverra. Euismod elementum nisi quis eleifend quam adipiscing vitae. Hendrerit dolor magna eget est lorem ipsum. Augue ut lectus arcu bibendum at varius. Sagittis purus sit amet volutpat consequat mauris. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Id diam maecenas ultricies mi eget mauris pharetra. Diam sit amet nisl suscipit adipiscing bibendum. Tristique risus nec feugiat in. Mauris augue neque gravida in fermentum et sollicitudin. Lorem mollis aliquam ut porttitor leo. Nisl pretium fusce id velit. Tellus orci ac auctor augue mauris augue neque gravida in. Pulvinar mattis nunc sed blandit libero volutpat. Aliquam ut porttitor leo a.
3
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam faucibus purus in massa tempor nec feugiat. Laoreet id donec ultrices tincidunt arcu non. Tempus quam pellentesque nec nam aliquam sem. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Sapien pellentesque habitant morbi tristique senectus. Libero volutpat sed cras ornare arcu dui vivamus arcu felis. Nulla facilisi morbi tempus iaculis urna id volutpat. Mi ipsum faucibus vitae aliquet nec. Ac tincidunt vitae semper quis lectus. Egestas fringilla phasellus faucibus scelerisque eleifend donec pretium.
Nullam vehicula ipsum a arcu cursus vitae congue mauris. Suspendisse ultrices gravida dictum fusce ut placerat orci. Commodo nulla facilisi nullam vehicula ipsum. Lobortis scelerisque fermentum dui faucibus in ornare quam viverra. Euismod elementum nisi quis eleifend quam adipiscing vitae. Hendrerit dolor magna eget est lorem ipsum. Augue ut lectus arcu bibendum at varius. Sagittis purus sit amet volutpat consequat mauris. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Id diam maecenas ultricies mi eget mauris pharetra. Diam sit amet nisl suscipit adipiscing bibendum. Tristique risus nec feugiat in. Mauris augue neque gravida in fermentum et sollicitudin. Lorem mollis aliquam ut porttitor leo. Nisl pretium fusce id velit. Tellus orci ac auctor augue mauris augue neque gravida in. Pulvinar mattis nunc sed blandit libero volutpat. Aliquam ut porttitor leo a.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam faucibus purus in massa tempor nec feugiat. Laoreet id donec ultrices tincidunt arcu non. Tempus quam pellentesque nec nam aliquam sem. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Sapien pellentesque habitant morbi tristique senectus. Libero volutpat sed cras ornare arcu dui vivamus arcu felis. Nulla facilisi morbi tempus iaculis urna id volutpat. Mi ipsum faucibus vitae aliquet nec. Ac tincidunt vitae semper quis lectus. Egestas fringilla phasellus faucibus scelerisque eleifend donec pretium.
Nullam vehicula ipsum a arcu cursus vitae congue mauris. Suspendisse ultrices gravida dictum fusce ut placerat orci. Commodo nulla facilisi nullam vehicula ipsum. Lobortis scelerisque fermentum dui faucibus in ornare quam viverra. Euismod elementum nisi quis eleifend quam adipiscing vitae. Hendrerit dolor magna eget est lorem ipsum. Augue ut lectus arcu bibendum at varius. Sagittis purus sit amet volutpat consequat mauris. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Id diam maecenas ultricies mi eget mauris pharetra. Diam sit amet nisl suscipit adipiscing bibendum. Tristique risus nec feugiat in. Mauris augue neque gravida in fermentum et sollicitudin. Lorem mollis aliquam ut porttitor leo. Nisl pretium fusce id velit. Tellus orci ac auctor augue mauris augue neque gravida in. Pulvinar mattis nunc sed blandit libero volutpat. Aliquam ut porttitor leo a.
4
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam faucibus purus in massa tempor nec feugiat. Laoreet id donec ultrices tincidunt arcu non. Tempus quam pellentesque nec nam aliquam sem. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Sapien pellentesque habitant morbi tristique senectus. Libero volutpat sed cras ornare arcu dui vivamus arcu felis. Nulla facilisi morbi tempus iaculis urna id volutpat. Mi ipsum faucibus vitae aliquet nec. Ac tincidunt vitae semper quis lectus. Egestas fringilla phasellus faucibus scelerisque eleifend donec pretium.
Nullam vehicula ipsum a arcu cursus vitae congue mauris. Suspendisse ultrices gravida dictum fusce ut placerat orci. Commodo nulla facilisi nullam vehicula ipsum. Lobortis scelerisque fermentum dui faucibus in ornare quam viverra. Euismod elementum nisi quis eleifend quam adipiscing vitae. Hendrerit dolor magna eget est lorem ipsum. Augue ut lectus arcu bibendum at varius. Sagittis purus sit amet volutpat consequat mauris. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Id diam maecenas ultricies mi eget mauris pharetra. Diam sit amet nisl suscipit adipiscing bibendum. Tristique risus nec feugiat in. Mauris augue neque gravida in fermentum et sollicitudin. Lorem mollis aliquam ut porttitor leo. Nisl pretium fusce id velit. Tellus orci ac auctor augue mauris augue neque gravida in. Pulvinar mattis nunc sed blandit libero volutpat. Aliquam ut porttitor leo a.
Har du frågor eller behöver ytterligare steg för steg guidning för specifika frågor?
Kontakta oss via supportens kontaktformulär (ny flik).
Senaste nyheter
Skapa ett kontaktformulär
Skapa en orienteringssida