title: Preventing anchor from jumping on page load
body: <p>I'm currently using 'smooth scroll' on my wordpress page, and I'm attempting to have the page smoothly scroll to the requested section when coming from an external link (using anchors ( <code>#portfolio</code>)from there I want the page to start at the top and THEN scroll to the portfolio section.</p>
  
  <p>What's happening is it briefly displays the 'portfolio section' (anchor jump) and THEN resets to the top and scrolls down.</p>
  
  <h3>Code</h3>
  
  <pre><code>$(function() {
      $('.menu li a').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) {
          $root.animate({
          scrollTop: target.offset().top - 75
          }, 800, 'swing');
              return false;  
              }
          }
      });
  });
  </code></pre>
  
  <h3>page load</h3>
  
  <pre><code>$(window).on("load", function() {
  if (location.hash) { // do the test straight away
      window.scrollTo(0, 0); // execute it straight away
      setTimeout(function() {
      window.scrollTo(0, 0); // run it a bit later also for browser compatibility
      }, 1);
  }
  var urlHash = window.location.href.split("#")[1];
  if (urlHash &amp;&amp; $('#' + urlHash).length)
      $('html,body').animate({
      scrollTop: $('#' + urlHash).offset().top - 75
      }, 800, 'swing');
  });
  </code></pre>
  
  <p>How do I prevent the 'jumping' that seems to happen on page load?</p>
  
  <h3>HTML - nav links (using dummy links)</h3>
  
  <pre><code>&lt;a href="link.com/#portfolio&gt;portfolio&lt;/a&gt;
  </code></pre>
  
  <h3>HTML - divs</h3>
  
  <pre><code>&lt;div id="portfolio&gt;&lt;/div&gt;
  </code></pre>