ToC within Knowledge Center Documentation

Hello folks - I’m looking to implement an FAQ within our KCB (yay acronyms) and I’d like to include a table of contents within the document, to allow for ease of navigation as these docs may sometimes be a bit long. 

Here’s what I mean: 

This would allow users to navigate to the parts that they want, and pivot back to actually doing things within the application. 

Is there a clean way to do this currently, that I’m just missing? I attempted to use something like: 

#toc_container {
    background: #f9f9f9 none repeat scroll 0 0;
    border: 1px solid #aaa;
    display: table;
    font-size: 95%;
    margin-bottom: 1em;
    padding: 20px;
    width: auto;
}

.toc_title {
    font-weight: 700;
    text-align: center;
}

#toc_container li, #toc_container ul, #toc_container ul li{
    list-style: outside none none !important;
}

HTML:

<div id="toc_container">
<p class="toc_title">Contents</p>
<ul class="toc_list">
  <li><a href="#First_Point_Header">1 First Point Header</a>
  <ul>
    <li><a href="#First_Sub_Point_1">1.1 First Sub Point 1</a></li>
    <li><a href="#First_Sub_Point_2">1.2 First Sub Point 2</a></li>
  </ul>
</li>
<li><a href="#Second_Point_Header">2 Second Point Header</a></li>
<li><a href="#Third_Point_Header">3 Third Point Header</a></li>
</ul>
</div>

Which does kind-of work, but when you click a linked item, the URL changes (obviously) and the KCB kind of “freaks out” and you can no longer navigate it. You can close it, but it’s pretty clear this is not normal behavior and you probably broke something.