Dynamically Generated Smooth Scrolling Link List for Typo 3 Page Content Elements

// navigation

Blog


// content

How to build a library for dynamic scrolling to all content elements on a Typo3 page

Let us explain our own sidebar box on your left hand side. In there Typo 3 will add dynamically rendered links to all content elements on the current page and take the field header for naming the links. Additionally if a user clicks on a link he will be send to the content element smoothly by using jQuery and a smooth scrolling framework called Bookmarkscroll.js.

To make this work you need to use css_styled_content in your static template, because this will wrap a div with an unique id around your content element. If you decide to not use it or have changed the standard behaviour you can just create your own wrapper DIV using this line (fluid):

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

Have in mind that you need to close the tag either at the end of your template or just after opening it as we are just interrested in the starting point of content!  So we do not really need a wrapping DIV, but it might be important to have an unique ID as a wrapper later on, anyways. 

After we have analyzed our content and saw those unique IDs at the points where we want users to be able to scroll to, we just include jQuery at our document’s head:

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

That is the state of the art jQuery framework when this article has been wrote and it is the same this website is using right now.

To make smooth scrolling work we load the chosen framework (any other will do, too but your lib needs changes regarding its documentation):

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

This will save some ressources when the page is been loaded for the first time. You may want to right click on it to download and put it onto your own server. The framework is Open Source as we just downloaded it, too.

Now that we have done all the pre-work, we can add our library to Typo 3:

Dynamic jQuery Bootstrap Scrolltop Library written in Typoscript for Typo3

typoscript

lib.sidebarNav = CONTENT
lib.sidebarNav {
  table = tt_content
# Wrapping a back to top link and a footer link to our list (optional)
  wrap=<ul><li><a href="javascript:bookmarkscroll.scrollTo('top')">Top</a></li>|<li><a href="javascript:bookmarkscroll.scrollTo('footer')">Footer</a></li></ul>
  select {
# Select page id where user is on  
 pidInList.data = page:uid   
 selectFields = header, uid
# Sort by backend sorting. Have in mind that this only works for one colPos as Typo 3 creates numbers for each column seperately. If you want to create a list of more than one backend column, you could use uid or crdate or just create a new field in pages table to sort the content on your own.
    orderBy = sorting
# render list language related
    languageField = sys_language_uid
# choose your contents colPos (usually 0) - if you need more than one: read above
    where=colPos=0
  }
 renderObj=COA
  renderObj{
    5=TEXT
    5 {
# Building a list item with a href tag to start a js that fires our smooth scrolling event
      wrap=<li><a href="javascript:bookmarkscroll.scrollTo('c|')">
      field=uid
    }
    # render header and close a- and li-tags after
    10=TEXT
    10{
      required=1
      wrap=|</a></li>
      field=header
    }
  }
}

Now you just need to add footer and header IDs to your Default Template in case you want a back to top link and footer link in your list. After that we add our library to our fluid template by just adding {lib.sidebarNav} to the desired position in our HTML file.

Typoscript Library written for jQuery and Bootstrap (with scroll to top and footer anchors) without comments for copy & paste:

Back to top and anchor list for all content elements sourcecode (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
    }
    10=TEXT
    10{
      required=1
      wrap=|</a></li>
      field=header
    }
  }
}
  • Current rating is 5.0 out of 5
  • 1
  • 2
  • 3
  • 4
  • 5
 
Rating: 5.0. 3 vote(s).
3 anonymous votes No rating done at all.
Your vote was '' (0 of 5) You are an anonymous user.
You may log on to do personalized votings
 Click the rating bar to rate this item Please log on to do ratings

Comments

comments powered by Disqus