Eine dynamische ScrollTo Library für Typo3 für alle Content Elemente auf einer Seite

// navigation

Blog


// content

10. Feb 2018

Dynamisches Scrollen zu Content Elementen einer Seite (Typo3 Erweiterung in Typoscript)

Wir erklären hier die Funktionalität unserer Sidebar Box zu Ihrer linken. Dort werden für alle Inhaltselemente einer Seite dynamisch Links mit dem entsprechenden Titel aus dem Feld "Header" des Contents zu einem Link zusammengebastelt, der dann jeden einzelnen Inhalt von Typo 3 direkt und "smooth" ansteuerbar macht. Dabei stellen wir das Script vor und erklären Anfängern wie Profis das Einbinden aller benötigten Librarys bzw. des Typoscript Snippets. Dabei benötigen Sie keinen Offset, können diesen aber definieren (z.B. margin-top: 20px oder padding: 40px auf den div-Container mit der entsprechenden angescrollten Anker-ID), über eine animate-Funktion von Javascript wird der entsprechende Anker bereits flüssig und an der richtigen Position angescrollt. Achten Sie dabei auf display: block, float: left und sonstige Anweisungen, die die Position des Elements für den Browser an falsche Stelle verschieben könnten. Hierzu einfach Element untersuchen und falls ein Container die Höhe 0 hat und dieses Element darin liegt, läuft etwas schief. Am besten helfen Sie sich mit den Standard-Klassen von Bootstrap: col-xs-12, col-sm-6, col-md-4 und row.

Das Ganze funktioniert natürlich auch mit Grid Elements und jedem anderen vernünftig-systematisch aufgebauten Webdesign.

Zu allererst ist zu sagen, dass die Funktionalität hierfür standardmäßig von css_styled_content generiert wird, die um jedes Inhaltselement eine DIV mit der Id "c + uid" des Contents legt. Ohne diese funktionalität wäre das nicht möglich! Um diese nachzubauen reicht es aber in Fluid einen äußeren Container anzulegen, der wie folgt aussieht:

<div id="c{data.uid}">

Denken Sie daran diesen am Ende wieder zu schließen! Der Einbau ist denkbar leicht. Zuerst stellen wir sicher, dass wir eine aktuelle jQuery Bibliothek im Header unserer Seite laden:

page.includeJSlibs { jquery = https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js }

Dies ist dieselbe Bibliothek von derselben Quelle, die auch wir im Einsatz haben – die aktuellste zum Erstellungsdatum dieses Artikels.

Danach laden wir die bookmark.js äquivalent wie oben oder im Footer:

page.includeJSFooterlibs { bookmarkscroll = renoi.de/typo3conf/ext/renoide/Resources/Public/js/bookmarkscroll.js }

Dies spart Ressourcen beim Laden der Seite und lädt die Bibliothek erst, wenn alle HTML und CSS Elemente da sind. Übrigens: Rechtsklick zum Herunterladen eindeutig erlaubt – es handelt sich hierbei um eine Open Source Bibliothek, die wir auch nur heruntergeladen haben.

Und nun kommen wir zum aufregenden Teil, der dynamisch erstellten Typo3 Library, damit das Ganze auch funktioniert:

 

Die dynamische jquery / bootstrap Lib zum Herauskopieren für Typo3

typoscript



lib.sidebarNav = CONTENT
lib.sidebarNav {
# Wir wählen die Content Tabelle von Typo3
table = tt_content
# Wir wrappen die entsprechenden Elemente mit einem Javascript Befehl in eine Liste und fügen so Top und Bottom Links hinzu
wrap=<ul><li><a href="javascript:bookmarkscroll.scrollTo('top')">Top</a></li>|<li><a href="javascript:bookmarkscroll.scrollTo('footer')">Footer</a></li></ul>
select {
# Hier wählen wir über die Seiten-ID die entsprechenden Felder Header, Content ID des Inhaltselements und die Typo3 Backend-Sortierung
pidInList.data = page:uid
selectFields = header, uid, sorting
orderBy = sorting
languageField = sys_language_uid
# Wichtig: Dies müssen Sie anpassen, wenn Ihre Inhaltselemente nicht in colPos 0 liegen!
where=colPos=0
}
renderObj=COA
renderObj{
5=TEXT
5 {
# Jetzt wrappen wir den dynamischen Content mit dessen UID in einem Javascript a-href Befehl und geben den Header aus, wenn er wahr ist (also vorhanden)
wrap=<li><a href="javascript:bookmarkscroll.scrollTo('c|')">
field=uid
if.isTrue.data = field:header
}
# Den Header des Content Elements ausgeben
10=TEXT
10{
required=1
if.isTrue.data = field:header
wrap=|</a></li>
field=header
# Hier schneiden wir den Header Wortsensitiv ab nach 25 Zeichen und fügen ... hinzu
cropHTML = 25|&nbsp;...|1
}
}
}

Die Scrolltop ID wird im Header Template gesetzt, hier der Code ohne Kommentare

Fügen Sie nun noch die Top und Footer IDs in Ihr Default Template, damit auch diese statischen Links funktionieren – danach sind wir sogut wie fertig. Nun bauen wir nur noch die lib mit {lib.sidebarNav} in unser Template ein und haben eine Liste mit seicht scrollenden Links zu jedem Content-Element der Seite!


Die Lib ohne Kommentare zum einfachen Herauskopieren: 

 

Totop Scrollto Bootstrap jQuery Anker Bibliothek für Typo3 7, 8, 9+ (Typoscript)

typoscript



lib.sidebarNav = CONTENT
lib.sidebarNav {
table = tt_content
wrap=<ul><li><a href="javascript:bookmarkscroll.scrollTo('top')">Top</a></li>|<li><a href="javascript:bookmarkscroll.scrollTo('footer')">Footer</a></li></ul>
select {
pidInList.data = page:uid
selectFields = header, uid, sorting
orderBy = sorting
languageField = sys_language_uid
where=colPos=0
}
renderObj=COA
renderObj{
5=TEXT
5 {
wrap=<li><a href="javascript:bookmarkscroll.scrollTo('c|')">
field=uid
if.isTrue.data = field:header
}
# Den Header des Content Elements ausgeben
10=TEXT
10{
required=1
if.isTrue.data = field:header
wrap=|</a></li>
field=header
cropHTML = 25|&nbsp;...|1
}
}
}

Mit dieser Library ist "scroll to" kein Problem mehr. Einfach die Typo3 Function einbinden und Sie erhalten nicht nur einen "totop"-Link im Contentbereich Ihrer Seite, sondern auch eine dynamische auf Bootstrap basierende jQuery-Typo3-Library, die ihresgleichen sucht. Webdesign im Jahr 2018 geht heute so, benötigt wenig Ressourcen (CSS Überladung) und funktioniert einfach.

Rating: 4.5. 6 Bewertung(en).
6 anonyme Bewertungen
No rating done at all.
Dein Voting war (0 von 5) Du bist nicht eingeloggt.
Um persönliche Votings abzugeben, kannst du dich einloggen.
Click the rating bar to rate this item Please log on to do ratings

Kommentare

comments powered by Disqus