Von Kay Eickhoff
Contao Tipps und Tricks: Scroll Back To Top.
Wie du mit Contao einen Scroll Back to Top Link erstellst und die Navigation der Website verbesserst.
Ein Scroll Back To Top Link ist ein grafisches Element auf einer Webseite, das es dem Benutzer ermöglicht, durch einen Klick schnell zum Anfang der Seite zurückzukehren. Dieser Link erscheint normalerweise am unteren Rand einer Webseite, wenn der Benutzer nach unten scrollt. Durch das Klicken auf diesen Link wird die Seite automatisch wieder nach oben gescrollt.
1) Modul erstellen:
- Erstelle ein Modul vom Typ „Eigenen-HTML-Code“ und gib als Titel „Scroll Back To Top Link“ ein. Füge folgenden HTML-Code hinzu:
<div class="scroll-back-to-top-link">
<a title="TOP" href="((env::request))#top">TOP</a>
</div>
<!-- Ersetze die Klammern durch geschweifte Klammern -->2) Eigenen Layoutbereich anlegen:
- Füge in Seitenlayout / Eigene Layoutbereiche einen neuen Bereich mit folgenden Einstellungen hinzu: Titel: Scroll Back To Top Link, ID: scroll-back-to-top-link, Position: Vor dem umschließenden Element. Dieser Bereich erscheint im Quelltext als ID (scroll-back-to-top-link).
- Klicke „Speichern“.
- Platziere das Modul „Scroll Back To Top Link“ im Reiter Frontend Module im Layoutbereich: Scroll Back To Top Link und speichere deine Anpassungen.
3) Scroll Back To Top Link anhand der Scrollposition einblenden:
Damit der Scroll Back To Top Link nicht sofort, sondern erst während des Scrollens angezeigt wird, füge folgenden Code im Seitenlayout / „Eigener JavaScript-Code“ hinzufügen.
// Funktion zum Scrollen nach oben
function scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}
// Funktion zum Überprüfen der Scrollposition und Anzeigen des Buttons
function checkScrollPosition() {
var scrollButton = document.querySelector('#scroll-back-to-top-link');
if (window.scrollY > 400) {
scrollButton.classList.add('show'); // .show wird verwendet um den Link beim Scrollen anzuzeigen
} else {
scrollButton.classList.remove('show');
}
}
// Initialüberprüfung der Scrollposition beim Laden der Seite
checkScrollPosition();
// Ereignislistener für das Scrollen der Seite
window.addEventListener('scroll', checkScrollPosition);4) CSS-Anweisung:
Passe den Link mit CSS an. Beispiel:
/* ID des zuvor angelegten eigenen Layoutbereichs */
[id="scroll-back-to-top-link"] {
position: fixed;
display: none;
right: 40px;
bottom: 40px;
z-index: 999;
}
[id="scroll-back-to-top-link"].show {
display: block;
}
/* Scroll Back To Top Link stylen */
[id="scroll-back-to-top-link"] a:link,
[id="scroll-back-to-top-link"] a:visited {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: #fdea40;
color: #000;
font-weight: bold;
text-decoration: none;
}
[id="scroll-back-to-top-link"] a:hover {
color: #000;
text-decoration: underline;
}5) So siehts aus!
Beispiel: Scroll Back To Top Link
Fazit: Zurück zum Anfang!
Die Implementierung eines Scroll Back To Top Links in Contao bietet zahlreiche Vorteile für die Benutzererfahrung und die Navigation auf einer Webseite. Durch die Platzierung des Links am unteren Rand der Seite wird die Navigation auf langen Seiten mit viel Inhalt erheblich erleichtert, was zu einer verbesserten Benutzererfahrung führt. Darüber hinaus optimiert der Scroll Back To Top Link die Zugänglichkeit der Seite, insbesondere für Benutzer mit eingeschränkter Mobilität oder auf mobilen Geräten, indem er ihnen eine einfache Möglichkeit bietet, schnell zum Anfang der Seite zu gelangen.
Blog durchsuchen:
Das könnte dich auch interessieren:
