JavaScript Footnotes

footnotes.js

$(document).ready(() => {
  /**
   * @param {element} e The element that was clicked
   * @return {element} The element that is being pointed to
   */
  const goTo = (e) => {
    let goTo = $(e.currentTarget).attr('href');
    // remove the pound sign
    goTo = goTo.substr(1);
    // Use document.getElementById() to accomodate colon in element id
    // (https://stackoverflow.com/a/11862160/1591507)
    return $(document.getElementById(goTo));
  };

  /**
   * The amount of top padding when scrolling to/from a footnote
   */
  const padding = 10;

  $('.footnote').click((e) => {
    $(window).scrollTop(goTo(e).offset().top - padding);
    e.preventDefault();
  });

  $('.reversefootnote').click((e) => {
    $(window).scrollTop(goTo(e).parents().offset().top - padding);
    e.preventDefault();
  });
});

Hey Martyn, thanks for sharing this and the blog post https://www.drinkingcaffeine.com/2017/08/12/a-better-way-to-handle-website-footnotes/

It was super easy to implement and really helped with my footnotes getting caught in my nav bar.

@admin-mccallumpartners You bet. Glad it was helpful!