17

17Slow scrolling

17.3

Slow scrolling summary

The scroll.js file for each page needs a jQuery for each slow scroll link. The full scroll.js file for the web page 99-00-typicals is this (sorry this is a bit long):

01-pages/99-00-typicals/05-js/99-00-scroll.js
$(document).ready(function() {                  /* START OF PAGE READY FUNCTION */

 /* ---------------------------------------------------------------------------
   SCROLL TO TOP
   ------------------------------------------------------------------------- */
   $('.js--sc-000000').click(function () {
       $('html, body').animate({scrollTop: $('#js--000000').offset().top -80}, 1000);
    });

 /* ---------------------------------------------------------------------------
   SCROLL TO CHAPTER (Non heading level after TOC)
   ------------------------------------------------------------------------- */
    $('.js--sc-990000').click(function () {
       $('html, body').animate({scrollTop: $('#js--990000').offset().top -10}, 1000);
    });

  /* ---------------------------------------------------------------------------
   SCROLL TO -  SECTIONS & SUBSECTIONS
   ------------------------------------------------------------------------- */
    $('.js--sc-990100').click(function () {
       $('html, body').animate({scrollTop: $('#js--990100').offset().top -20}, 1000);
    });

    $('.js--sc-990101').click(function () {
       $('html, body').animate({scrollTop: $('#js--990101').offset().top -20}, 1000);
    });

    $('.js--sc-990200').click(function () {
       $('html, body').animate({scrollTop: $('#js--990200').offset().top -20}, 1000);
    });

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

    $('.js--sc-990400').click(function () {
       $('html, body').animate({scrollTop: $('#js--990400').offset().top -20}, 1000);
    });

    $('.js--sc-990500').click(function () {
       $('html, body').animate({scrollTop: $('#js--990500').offset().top -20}, 1000);
    });

    $('.js--sc-990600').click(function () {
       $('html, body').animate({scrollTop: $('#js--990600').offset().top -20}, 1000);
    });

    $('.js--sc-990700').click(function () {
       $('html, body').animate({scrollTop: $('#js--990700').offset().top -20}, 1000);
    });

    $('.js--sc-990800').click(function () {
       $('html, body').animate({scrollTop: $('#js--990800').offset().top -20}, 1000);
    });

    $('.js--sc-990900').click(function () {
       $('html, body').animate({scrollTop: $('#js--990900').offset().top -20}, 1000);
    });

    $('.js--sc-991000').click(function () {
       $('html, body').animate({scrollTop: $('#js--991000').offset().top -20}, 1000);
    });

  /* ---------------------------------------------------------------------------
   SCROLL TO -  INLINE SECTIONS
   ------------------------------------------------------------------------- */
    $('.js--sc-990101a').click(function () {
       $('html, body').animate({scrollTop: $('#js--990101a').offset().top -120}, 1000);
    });

    $('.js--sc-990101b').click(function () {
       $('html, body').animate({scrollTop: $('#js--990101b').offset().top -120}, 1000);
    });

    $('.js--sc-990200a').click(function () {
       $('html, body').animate({scrollTop: $('#js--990200a').offset().top -120}, 1000);
    });

    $('.js--sc-990200b').click(function () {
       $('html, body').animate({scrollTop: $('#js--990200b').offset().top -120}, 1000);
    });

    $('.js--sc-990200c').click(function () {
       $('html, body').animate({scrollTop: $('#js--990200c').offset().top -120}, 1000);
    });

    $('.js--sc-990300a').click(function () {
       $('html, body').animate({scrollTop: $('#js--990300a').offset().top -120}, 1000);
    });

    $('.js--sc-990300b').click(function () {
       $('html, body').animate({scrollTop: $('#js--990300b').offset().top -120}, 1000);
    });

    $('.js--sc-990300c').click(function () {
       $('html, body').animate({scrollTop: $('#js--990300c').offset().top -120}, 1000);
    });

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

    $('.js--sc-990300e').click(function () {
       $('html, body').animate({scrollTop: $('#js--990300e').offset().top -120}, 1000);
    });

    $('.js--sc-990300f').click(function () {
       $('html, body').animate({scrollTop: $('#js--990300f').offset().top -120}, 1000);
    });

    $('.js--sc-990400a').click(function () {
       $('html, body').animate({scrollTop: $('#js--990400a').offset().top -120}, 1000);
    });

    $('.js--sc-990400b').click(function () {
       $('html, body').animate({scrollTop: $('#js--990400b').offset().top -120}, 1000);
    });

    $('.js--sc-990400c').click(function () {
       $('html, body').animate({scrollTop: $('#js--990400c').offset().top -120}, 1000);
    });

    $('.js--sc-990400d').click(function () {
       $('html, body').animate({scrollTop: $('#js--990400d').offset().top -120}, 1000);
    });

    $('.js--sc-990700a').click(function () {
       $('html, body').animate({scrollTop: $('#js--990700a').offset().top -120}, 1000);
    });

    $('.js--sc-990700b').click(function () {
       $('html, body').animate({scrollTop: $('#js--990700b').offset().top -120}, 1000);
    });

/* ---------------------------------------------------------------------------
   SCROLL TO -  CROSS REFERENCES
   ------------------------------------------------------------------------- */
    $('.js--sc-f99-01').click(function () {
       $('html, body').animate({scrollTop: $('#js--f99-01').offset().top -80}, 1000);
    });

    $('.js--sc-t99-01').click(function () {
       $('html, body').animate({scrollTop: $('#js--t99-01').offset().top -60}, 1000);
    });

});                                             /* END OF PAGE READY FUNCTION */
Code 17.5   99-00-scroll.js in its entirety

Ok, that is a very long listing; it has 32 slow scroll points. The typicals page has examples of everything available to the web site and most of it has a link of some form or another, hence that large number of slow scroll point in the file.

Most pages have fewer than 10 scroll points (I think the average for the whole website works out at six per page).

I tend to group my scroll points into chapters, sections & subsections, inline sections and everything else (cross references).

17.3.1

Building the slow scroll file

The easiest way to build the file is to copy one of the three lines groups of jQuery:

   $('.js--sc-IDNO').click(function () {
      $('html, body').animate({scrollTop: $('#js--IDNO').offset().top -OFFSET}, 1000);
   });

Replicate it and change the IDNO (underlined in red) and the OFFSET (uinderlined in blue) for the slow scroll point in question.

The following table (Table 17.1) shows the ID, class and offset arrangements for the standard sections and objects.

The examples shown beneath each entry can be copied and pasted into a scroll.js file.

I use a duration of 1 second (1000ms) in all my slow scroll code; this is purely my preference, any longer and the effect takes an annoying amount of time. Any shorter and I start to feel seasick.

I leave it up to you.

Item ID Example Class Offset
Lead-in section js--XX0000 Lead-in section X
id="js--030000"		 js--sc-XX0000 -10
E.g. 
$('.js--sc-990000').click(function () {
   $('html, body').animate({scrollTop: $('#js--990000').offset().top -10}, 1000);
});
Section js--XXYY00 Section X.Y
id="js--030100"		 js--sc-XXYY00 -20
E.g. 
$('.js--sc-990100').click(function () {
   $('html, body').animate({scrollTop: $('#js--990100').offset().top -20}, 1000);
});
Subsection js--XXYYZZ Subsection X.Y.Z
id="js--030101"		 js--sc-XXYYZZ -20
E.g. 
$('.js--sc-990101').click(function () {
   $('html, body').animate({scrollTop: $('#js--990101').offset().top -20}, 1000);
});
Inline section js--XXYYZZa Inline section of section X.Y.Z
id="js--030101a"		 js--sc-XXYYZZa -120
E.g. 
$('.js--sc-990101a').click(function () {
   $('html, body').animate({scrollTop: $('#js--990101a').offset().top -120}, 1000);
});
Figure js--fXX-YY Figure X.Y
id="js--f99-01"		 js--sc-fXX-YY -80
E.g. 
$('.js--sc-f99-01').click(function () {
   $('html, body').animate({scrollTop: $('#js--f99-01').offset().top -80}, 1000);
});
Table js--tXX-YY Table X.Y
id="js--t99-01"		 js--sc-tXX-YY -60
E.g. 
$('.js--sc-t99-01').click(function () {
   $('html, body').animate({scrollTop: $('#js--t99-01').offset().top -60}, 1000);
});
Code js--cXX-YY Code X.Y
id="js--c99-01"		 js--sc-cXX-YY -120
E.g. 
$('.js--sc-c99-01').click(function () {
   $('html, body').animate({scrollTop: $('#js--c99-01').offset().top -120}, 1000);
});
Equation js--eXX-YY Equation X.Y
id="js--e99-01"		 js--sc-eXX-YY -80
E.g. 
$('.js--sc-e99-01').click(function () {
   $('html, body').animate({scrollTop: $('#js--e99-01').offset().top -80}, 1000);
});
Footnote js--fnXX Footnote XX
id="js--fnXX"		 js--sc-fnXX -80
E.g. 
$('.js--sc-fn01').click(function () {
   $('html, body').animate({scrollTop: $('#js--fn01').offset().top -80}, 1000);
});
Table 17.1   ID, class and offsets for typical slow scroll arrangements



End flourish image