Tocify a href Bug

Clicking a tags with href attributes containing URL fragments specifying an internal target location doesn't trigger move to that location.

by Stephen Kasica

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tocify/1.9.0/javascripts/jquery.tocify.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tocify/1.9.0/stylesheets/jquery.tocify.min.css">
<main>
      <h1>Page Title</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam magna libero, pulvinar vitae dapibus ac, hendrerit vitae urna. Vivamus urna orci, convallis ut lacus non, porta venenatis lacus. Ut molestie interdum velit, in mattis velit dignissim a. Phasellus tempor id ipsum nec maximus. Sed a est <a href="#SubHeading">Sub Heading</a>, consectetur arcu ut, commodo massa. Morbi mattis pretium nisl, id porttitor urna molestie ac. Pellentesque eget ex quis mi auctor varius vitae vitae lacus. Mauris at nulla nisi. Quisque rutrum purus at porttitor posuere. Vestibulum egestas ipsum ac mi sodales efficitur et ut ex. Mauris dictum ultricies neque ut pharetra. Aenean nec ullamcorper eros, sit amet elementum mauris. Ut consequat est nec odio sollicitudin, quis ornare odio fringilla. Ut elementum lobortis est, ut sollicitudin mi congue eget. Donec maximus nisi non imperdiet elementum. Nulla ac nisi sagittis, convallis nisi ut, egestas eros.</p>
      <p>Morbi ut orci sapien. Suspendisse potenti. Phasellus volutpat suscipit cursus. Duis maximus vehicula magna. Sed non elit egestas, iaculis nibh aliquet, euismod ante. Vestibulum orci dolor, lobortis et eleifend id, dapibus et erat. Nullam efficitur nisl non euismod vestibulum. Fusce lobortis volutpat nisl eget auctor.</p>
      <p>Curabitur ultrices, sem ut vulputate mollis, nisi felis congue dolor, in venenatis turpis sapien ac lectus. Aenean tristique auctor quam ac tristique. Suspendisse suscipit sem in ante vehicula, lacinia <a href="#SubHeading2">Sub Heading #2</a> augue sagittis. Pellentesque non libero tempor, porttitor eros id, condimentum nulla. Vivamus tincidunt...

CSS

main {
  width: 66.6666%;
  display: inline-blcok;
  float: left;
}
sidebar {
  width: 33.33333%;
  float: right;
}

.active {
  color: tomato;
}

JavaScript

//Executes your code when the DOM is ready.  Acts the same as $(document).ready().
   $(function() {
     //Calls the tocify method on your HTML div.
     $(".toc").tocify({
       context: 'main',
       selectors: 'h1,h2,h3,h4,h5,h6',
     });
   });