title: Javascript smoothscrolling still lagging
body: <p>I'm working on this page: <a href="http://i333180.iris.fhict.nl/p2_vc/" rel="nofollow">http://i333180.iris.fhict.nl/p2_vc/</a></p>
  
  <p>After some help from some of you here, I have successfully added a smooth scroll plugin.</p>
  
  <p>However, I am noticed a lot of scroll lag when the page is first opened.</p>
  
  <p><strong>What I've Tried</strong>  </p>
  
  <ul>
  <li>I compressed my background image from 10 mb to 2.2mb (1280 x 1024).  </li>
  <li><p>I moved the background image to a div element, so it was only on the content and not behind the video.</p>
  
  <pre><code>&lt;div id="div_section_img"&gt;
  &lt;!-- all content --&gt;
  &lt;/div&gt;
  </code></pre>
  
    
  
  <pre><code>#div_section_img{
      background: url("nature.png") no-repeat center center fixed; 
  }
  </code></pre>
  
  <ul>
  <li>In doing so, a strange 'blank' line appeared between the video and the content section. I think this is because the video height is set to <code>100vh</code>.</li>
  </ul>
  
  <p>I managed to fix this issue by changing the <code>margin-top</code> setting to <code>padding-top</code> on <code>#logo</code> and the <code>footer</code> element.</p>
  
  <pre><code>#logo {
      width: 410px;
      **padding-top: 120px;**
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 0px;
  }
  
  footer {
      **padding-top: 100px;**
      width: 100%;
      height: 300px;
      background-color: rgba(25, 25, 25, 0.8);
  }
  </code></pre></li>
  </ul>
  
  <p>While all of this has helped somewhat, there is still a very noticeable amount of scroll lag.</p>
  
  <p>How can I get rid of the scroll lag?</p>
  
  <p><strong>smooth-scroll.js</strong></p>
  
  <pre><code>$(function() {
    $('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
          }, 1000);
          return false;
        }
      }
    });
  });
  </code></pre>
  
  <p><a href="https://css-tricks.com/snippets/jquery/smooth-scrolling/" rel="nofollow">From this css-tricks tutorial</a></p>
  
  <ul>
  <li>Even scroll top 5000 is lagging</li>
  </ul>
  
  <p><strong>Update</strong>
  Tried this script instead of the other scripts</p>
  
  <pre><code>        function start(){
          $(function() {
            $('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
                  }, 1000);
                  return false;
                }
              }
            });
          });
          function videoEnded() {
              $('html,body').animate({
                  scrollTop: $("#section").offset().top
              }, 1000);
          }
      }
      window.onload = start;
  </code></pre>
  
  <p>But still lagging</p>
  
  <p><strong>Update 2</strong>
  Added </p>
  
  <pre><code>var loading = $('html');
  loading.addClass('loading');
  $(window).load(function(){
       loading.removeClass('loading');
  });
  </code></pre>
  
  <p>Code works, lag is still noticeable</p>