Scroll to the bottom of the hero div after clicking on an item [STICKY header]

scroll-to-bottom-of-div.js

// <header>
//   <div class="logo">......</div>
// </header>
//
// <div id="hero">
//  <span class="scroll-to-bottom-of-hero">Click here to scroll to bottom of hero</span>
// </div>

// #hero is the ID of the hero element
// header is the header element that is sticky

$('.find-out-how-link').on('click', function() {
  var heroHeight = $('#hero').outerHeight();
  var navHeight = $('header').outerHeight();
  $('html, body').animate({
        scrollTop: (heroHeight - navHeight) + 'px'
    }, 'slow');
});