4

I'm in the process of creating a "table of contents" for a SharePoint site page (using 2016 SP online) and have managed to do this by internal page links, which when clicked, navigate the user down the page to a bookmarked subheading.

However, I would like this Table of Contents to be available on the side of the page, or "float" as they scroll down, so they don't need to constantly move back to the top every time they want to navigate to a different section.

Is there an OOTB solution, or not to difficult way to implement this?

1
+100

You mean like a table of contents from a Wiki?

I am researching something similar, maybe one of these links is useful to you:

SharePoint Wiki Table of Contents https://n8d.at/blog/revised-table-of-contents-for-wiki-pages/ https://n8d.at/blog/enhance-wiki-page-layout-by-adding-a-navgational-table-of-contents/ https://junestime.wordpress.com/2013/02/01/add-table-of-contents-to-a-wiki-page-in-sharepoint-2010/comment-page-1/

| improve this answer | |
  • Thankyou, we used something similar to the third link you provided. Essentially once we had table of contents script that picked all text with style Heading 1, 2, 3,4, we displayed it using a Contents Editor. We then wrapped the content header in a div with class, and built another content editor that fixed the position of the toc to the screen – Philayyy May 17 '18 at 0:48
0

OOB Table of contents webpart is available. You can configure it as per your needs.

go to the “Content Rollup” category in webpart category section. Select “Table of Contents".

| improve this answer | |
  • 1
    I’ve tried the TOC webpart and it displays the links within the “current navigation”( links to other pages), we need a solution that displays internal page links. So for example if users want to navigate halfway down the page to a h1 styles title, they would click the link in the TOC and it will take them there (similar to TOC in word). We also want to make it FLOAT so it is always accessible no matter where on the page they are. Can this be achieved with the TOC web part? – Philayyy May 9 '18 at 12:54
0

Below would work on SP13, not sure on 16...

You can insert internal links list you've built as a webpart. Use the walkthrough found on Mike Smiths blog for extracting the links out of the webpart, and writing them into another part of the page. In the example it's a marquee, but will work with on a div with position:fixed.

http://techtrainingnotes.blogspot.com/2013/05/adding-scrolling-list-of-messages-to.html

| improve this answer | |
0

We use the following code to create a webpart that is the table of contents. It doesn't float, though, so you'd have to figure out the CSS to do that. All of this goes in a CEWP or an HTML Web part. It runs through the page looking for headings (you might need to adjust class names), and creates the table of contents from those.

<!-- Table of Contents --> 
<div id="wiki-index"> 
<div class="toc">Table of Contents</div> 
</div> 
<!-- Table of Contents -->


<script type="text/javascript"> 
$(document).ready(function() {
    $(".ms-bodyareacell H1.ms-rteElement-H1, H2.ms-rteElement-H2, H3.ms-rteElement-H3, H4.ms-rteElement-H4").each(function(i) {
        var current = $(this);
        current.attr("id", "title" + i);
if(this.nodeName == "H1"){
        $("#wiki-index").append(("<a id='link" + i + "' href='#title" +
            i + "' title='" + current.attr("class") + "'>" +
            current.html() + "</a><br/>"));
}
else if(this.nodeName == "H2"){
        $("#wiki-index").append(("<a style='text-indent: 30px; display: inline-block;' id='link" + i + "' href='#title" +
            i + "' title='" + current.attr("class") + "'>" +
            current.html() + "</a><br/>"));
}
else if(this.nodeName == "H3"){
        $("#wiki-index").append(("<a style='text-indent: 60px; display: inline-block;' id='link" + i + "' href='#title" +
            i + "' title='" + current.attr("class") + "'>" +
            current.html() + "</a><br/>"));
}
else if(this.nodeName == "H4"){
        $("#wiki-index").append(("<a style='text-indent: 90px; display: inline-block;' id='link" + i + "' href='#title" +
            i + "' title='" + current.attr("class") + "'>" +
            current.html() + "</a><br/>"));
}

    })
});
</script>

<style> 
#wiki-index{border: 1px black dashed; 
background-color: whitesmoke; float: left; 
padding: 10px; padding-top: 0px; } 
#wiki-index .toc{font-size: 1.1em; 
font-weight: bold; text-align: center; 
padding: 5px; }
#wiki-index a[title=ms-rteElement-H1] 
{ font-size:14px; font-weight: bold} 
#wiki-index a[title=ms-rteElement-H2] 
{ font-size:12px; font-weight: normal} 
#wiki-index a[title=ms-rteElement-H2] div 
{ margin-left: 10px;} /*Add indent in front*/
#wiki-index a[title=ms-rteElement-H3] 
{ font-size:10px;} 
#wiki-index a[title=ms-rteElement-H3] div 
{ margin-left: 15px;} /*Add indent in front*/
#wiki-index a[title=ms-rteElement-H4] 
{ font-size:8px;} 
#wiki-index a[title=ms-rteElement-H4] div 
{ margin-left: 20px;} /*Add indent in front*/
</style>
| improve this answer | |
0

This solution caters fro 2016 also.

 <style>

  #toc {
    display: table;
    border: 1px solid #aaa;
    background-color: #f9f9f9;
    font-size: 95%;
    padding: 7px;
  }

  #toc #tocHeader  {
    font-weight: bold;
    text-align: center;
  }

  #toc a:before { /* content:"• "; */ }

  #toc a { line-height: 15px; margin: 10px; }

  #toc .toc_Level1 { margin-left: 5px; }

  #toc .toc_Level2 { margin-left: 15px; }

  #toc .toc_Level3 { margin-left: 25px; }

  #toc .toc_Level4 { margin-left: 35px; }

</style>

<div id="toc"></div>

<script src="https://sites.ey.com/sites/EYSE/Shared%20Documents/jquery.SPServices.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">

  function GenerateTOC() {

    $("#toc").append('<p id="tocHeader">Contents</p>');
    $(".ms-webpart-titleText h1,.ms-webpart-titleText h2,.ms-webpart-titleText h3,.ms-webpart-titleText h4,.ms-webpart-titleText > a").each(function (i) {

      var currentNode = $(this);

      currentNode.attr("id", "title" + i);

      var linkClass = (currentNode.hasClass('h1'))

        ? "toc_Level1"

        : (currentNode.hasClass('h2'))

          ? "toc_Level2"

          : (currentNode.hasClass('h3'))

            ? "toc_Level3"

            : (currentNode.hasClass('h4'))

              ? "toc_Level4"

              : "";

      $("#toc").append("<a id='link'" + i + "' class='" + linkClass + "' href='#title" + i + "' title='" + currentNode.attr("tagName") + "'>" + currentNode.html() + "</a><br>");
      currentNode.append(" <a href='#tocHeader'>[top]</a>");
    });
  }

  $(document).ready(function () {
    _spBodyOnLoadFunctionNames.push('GenerateTOC');
  });

  _spBodyOnLoadFunctionNames.push('GenerateTOC');

</script>
| improve this answer | |
0

for webpart pages:

<style>
   #toc {
      display: table;
      border: 1px solid #aaa;
      background-color: #f9f9f9;
      font-size: 95%;
      padding: 7px;
   }
   #toc #tocHeader  {
      font-weight: bold;
      text-align: center;
   }
   #toc a:before { /* content:"• "; */ }
   #toc a { line-height: 15px; margin: 10px; }
   #toc .toc_Level1 { margin-left: 5px; }
   #toc .toc_Level2 { margin-left: 15px; }
   #toc .toc_Level3 { margin-left: 25px; }
   #toc .toc_Level4 { margin-left: 35px; }

</style>

<div id="toc"></div>

<script src="https://sites.ey.com/sites/EYSE/Shared%20Documents/jquery.SPServices.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
   function GenerateTOC() {
      $("#toc").append('<p id="tocHeader">Contents</p>');
      $(".ms-webpart-titleText h1,.ms-webpart-titleText h2,.ms-webpart-titleText h3,.ms-webpart-titleText h4,.ms-webpart-titleText > a").each(function(i) {
         var currentNode = $(this);
         currentNode.attr("id", "title" + i);
         var linkClass = (currentNode.hasClass('h1') )? "toc_Level1": (currentNode.hasClass('h2') )? "toc_Level2": (currentNode.hasClass('h3') )? "toc_Level3" : (currentNode.hasClass('h4'))? "toc_Level4": "";

         $("#toc").append("<a id='link'" + i + "' class='" + linkClass + "' href='#title" + i + "' title='" + currentNode.attr("tagName") + "'>" + currentNode.html() + "</a><br>");
         currentNode.append(" <a href='#tocHeader'>[top]</a>");
      });
   }
   $(document).ready(function() 
       _spBodyOnLoadFunctionNames.
       push('GenerateTOC');
   });

   _spBodyOnLoadFunctionNames.
   push('GenerateTOC');
 </script>
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.