17Slow scrolling

The TOC also uses slow scrolling if the link is to a point on the same page.

The HTML for the TOC link is slightly different to that of the straight forward link of the previous section.

This is a TOC link from 99-00-typicals.html to a point on the same page:

<li><a class="js--sc-990300" href="99-00-typicals.html#js--990300"> 
<div class="toc-lev"><span class="toc-lev2-num">99.3</span><span class="toc-lev2-text">Typicals&nbsp;&mdash;&nbsp;Links</span></div></a>
</li>

...

<section class="section-std" id="js--990300">
    <div class="rg-row sub-title-row"> (section number & heading) -->
        <div class="rg-col rg-span1-5"></div>
        <div class="rg-col rg-span3-5">
            <div class="sub-title-overline"></div>
...

The link is this:

<a class="js--sc-990300" href="99-00-typicals.html#js--990300"> 

Compare this with the straight forward link of the previous section:

<a class=" xref js--sc-f99-01" href="#">Figure 99.1</a>

The main difference is that the href in the TOC is populated, it has the full page link in it: href="99-00-typicals.html#js--990300". This just means that the link will work even if there is no jQuery there to make it work (it will re-load the page and jump straight to the ID point). It means the TOC will work on browsers where JavaScript has been disabled.

Other than that it is exactly the same as the link in the previous section, in this case the ID is js--990300 and the associated class is js--sc-990300.

This works in exactly the same way as the class and ID in the previous section, the class has the same name as the target ID except that the js-- of the ID is replaced with js--sc-, i.e. there is an extra sc- after the --.

The jQuery in the scroll.js file has exactly the same format (just the class, ID and offset change, shown underlined in red):

    $('.js--sc-990300').click(function () {     /* START of scroll function */
       $('html, body').animate({scrollTop: $('#js--990300').offset().top -20}, 1000);
    });

The offset is just -20, you might think that this will put the start of the section behind the sticky navigation — it would except that the section starts with the over-line bar and this has a large top margin so we don’t need quite so much offset to make the thing look right. It looks like this:

The jQuery for the TOC has just the same format as the link in the previous section, it is just a question of copying the code and changing the class, ID and offset for each instance.