title: How to add 20px to the top when it scrolls down
body: <p>I created a button and when clicked it's scroll down to the next section of the page.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>scroll(el) {
    el.scrollIntoView({ 
      behavior: 'smooth',
      block: 'start' 
    });
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span class="btn"&gt;&lt;a (click)="scroll(forecast)"&gt;CheckForecast&lt;/a&lt;/span&gt;
  &lt;div #forecast class="container-fluid"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now, when it scrolls down, the top of the section get hided behind the fixed top navBar. I need to compensate the hight of my top navBar for it to scroll all the way down!?</p>
  
  <p>Thanks guys.</p>