title: How to implement smooth scrolling to section on different page when an anchor link is clicked?
body: <p>Since I made some progress, I'm editing this post.<br>
  My main menu is horizontally on top of the page, with <code>position:fixed</code>. I want to make it so that, when a link gets clicked, the page scrolls down smoothly to the respective target. Because of my sticky header, said target needs to get displayed with an offset from the viewport top.</p>
  
  <p>My HTML/CSS:</p>
  
  <pre><code>&lt;style&gt;
  #main_menu {
   position: fixed;
  }
  &lt;/style&gt;
  &lt;body&gt;
  
  &lt;nav id="main_menu"&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="#link1"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#link2"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="different-page.html#link3"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/nav&gt;
  </code></pre>
  
  <p>main section of index.html: </p>
  
  <pre><code>&lt;main&gt;
  &lt;h1 id="link1"&gt;Heading 1&lt;/h1&gt;
  &lt;!-- some content --&gt;
  &lt;h1 id="link2"&gt;Heading 2&lt;/h1&gt;
  &lt;!-- some content --&gt;
  &lt;/main&gt;
  </code></pre>
  
  <p>main section of different-page.html: </p>
  
  <pre><code>&lt;main&gt;
  &lt;!-- some content --&gt;
  &lt;!-- some content --&gt;
  &lt;!-- some content --&gt;
  &lt;!-- some content --&gt;
  &lt;h1 id="link3"&gt;Heading 3&lt;/h1&gt;
  &lt;!-- some content --&gt;
  &lt;/main&gt;
  </code></pre>
  
  <p>EDIT:
  I'm now using this for smooth scrolling between sections:</p>
  
  <pre><code>$('a[href*="#"]:not([href="#"])').click(function() {
  
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') &amp;&amp; location.hostname == this.hostname) {
      var target = $(this.hash);
  
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top - 220
        }, 1000);
        return false;
      }
    }
  });
  </code></pre>
  
  <p>It's working for smooth scrolling between sections on one page. But if I link to a section on a different page, it's not working correctly.<br>
  Example:<br>
  <code>&lt;li&gt;&lt;a href="#link1"&gt;Link 1&lt;/a&gt;&lt;/li&gt;</code> to <code>&lt;h1 id="link1"&gt;Heading 1&lt;/h1&gt;</code> works. On click, the page scrolls down to heading 1 and heading 1 is then shown 200px below the viewport top and doesn't get covered by my sticky header.<br>
  <code>&lt;li&gt;&lt;a href="different-page.html#link3"&gt;Link 3&lt;/a&gt;&lt;/li&gt;</code> links from index.html to section <code>&lt;h1 id="link3"&gt;Heading 3&lt;/h1&gt;</code> on <code>different-page.html</code> This also works, except the offset of -200 gets ignored. This means the section top aligns with the viewport top, so it gets covered by the sticky navigation.<br>
  I'm guessing that going to a new page somehow messes with my js? I would like it to always mind the offset so that, when I link to a specific section on another page, this section loads 200px away from the viewport top (so below my header, not underneath).<br>
  Hope I explained this right.</p>