How Do I Add an A-Z Controller

Subtitles Available. To activate select the CC button within the video

 

*A-Z Controller Code

<ul class="a-z-list">
 <li class="a-z-list-item"><a href="#A">A</a></li>
 <li class="a-z-list-item"><a href="#B">B</a></li>
 <li class="a-z-list-item"><a href="#C">C</a></li>
 <li class="a-z-list-item"><a href="#D">D</a></li>
 <li class="a-z-list-item"><a href="#E">E</a></li>
 <li class="a-z-list-item"><a href="#F">F</a></li>
 <li class="a-z-list-item"><a href="#G">G</a></li>
 <li class="a-z-list-item"><a href="#H">H</a></li>
 <li class="a-z-list-item"><a href="#I">I</a></li>
 <li class="a-z-list-item"><a href="#J">J</a></li>
 <li class="a-z-list-item"><a href="#K">K</a></li>
 <li class="a-z-list-item"><a href="#L">L</a></li>
 <li class="a-z-list-item"><a href="#M">M</a></li>
 <li class="a-z-list-item"><a href="#N">N</a></li>
 <li class="a-z-list-item"><a href="#O">O</a></li>
 <li class="a-z-list-item"><a href="#P">P</a></li>
 <li class="a-z-list-item"><a href="#Q">Q</a></li>
 <li class="a-z-list-item"><a href="#R">R</a></li>
 <li class="a-z-list-item"><a href="#S">S</a></li>
 <li class="a-z-list-item"><a href="#T">T</a></li>
 <li class="a-z-list-item"><a href="#U">U</a></li>
 <li class="a-z-list-item"><a href="#V">V</a></li>
 <li class="a-z-list-item"><a href="#W">W</a></li>
 <li class="a-z-list-item"><a href="#X">X</a></li>
 <li class="a-z-list-item"><a href="#Y">Y</a></li>
 <li class="a-z-list-item"><a href="#Z">Z</a></li>
</ul>
<style type="text/css">.a-z-list {
    display: block;
    list-style-type: disc;
    padding:0;
  }
  .a-z-list-item {
    list-style: none;
    list-style-position: initial;
    display: list-item;
    float: left;
    font-size: 14px;
    font-weight: 400;
    width: 48px;
    height: 48px;
    padding: 12px 12px;
    line-height: 24px;
    color: white;
    background-color: #325083;
    border-left: 1px solid white;
    border-bottom: 1px solid white;
  }
  .a-z-list-item:hover {
    background-color: #F0F1F1;
    color: #414042
  }
  .a-z-list-item a {
    text-decoration: none;
    color: #E5E6E7;
    display: block;
    width: 100%;
    height: 100%;
    font-size: 21px;
    text-align: center;
    padding: 0px;
  }
  .a-z-list-item a:hover {
    color: #414042;
  }</style>

**A-Z Anchor Links Code

<p>&nbsp;</p>
<style type="text/css">:target {
          display: block;
          position: relative;
          top: -150px;
          visibility: hidden;
        }</style>
<section>
 <h3>A<a id="A"></a></h3>

 <hr />
 <h3>B<a id="B"></a></h3>

 <hr />
 <h3>C<a id="C"></a></h3>

 <hr />
 <h3>D<a id="D"></a></h3>

 <hr />
 <h3>E<a id="E"></a></h3>

 <hr />
 <h3>F<a id="F"></a></h3>

 <hr />
 <h3>G<a id="G"></a></h3>

 <hr />
 <h3>H<a id="H"></a></h3>

 <hr />
 <h3>I<a id="I"></a></h3>

 <hr />
 <h3>J<a id="J"></a></h3>

 <hr />
 <h3>K<a id="K"></a></h3>

 <hr />
 <h3>L<a id="L"></a></h3>

 <hr />
 <h3>M<a id="M"></a></h3>

 <hr />
 <h3>N<a id="N"></a></h3>

 <hr />
 <h3>O<a id="O"></a></h3>

 <hr />
 <h3>P<a id="P"></a></h3>

 <hr />
 <h3>Q<a id="Q"></a></h3>

 <hr />
 <h3>R<a id="R"></a></h3>

 <hr />
 <h3>S<a id="S"></a></h3>

 <hr />
 <h3>T<a id="T"></a></h3>

 <hr />
 <h3>U<a id="U"></a></h3>

 <hr />
 <h3>V<a id="V"></a></h3>

 <hr />
 <h3>W<a id="W"></a></h3>

 <hr />
 <h3>X<a id="X"></a></h3>

 <hr />
 <h3>Y<a id="Y"></a></h3>

 <hr />
 <h3>Z<a id="Z"></a></h3>

 <p>&nbsp;</p>
</section>