title: Navigation scroll plugin offset issue really bugging me
body: <p>I have two navigation "smooth scroll" Javascript plugins on my page - one of them a scrollTo plugin which handles scrolling to anchors/section links on click, and another keyboard navigation scroll plugin to enable navigation with... you guessed it, the keyboard.</p>
  
  <p>The first plugin is working fine, I have set an offset in the code so that it scrolls nicely to each section perfectly and it looks really good. The keyboard navigation plugin on the other hand <em>mostly</em> works, I have also defined an offset in the code for this separate plugin to scroll where I want it to for each section - in fact it is working fine for every section <em>except</em> when scrolling to the Works section - there is a small but rather unsightly gap just between the navigation and the top section when scrolling it to using the keyboard. It's very close to where it should be, just not quuuuite there... and it's only an issue with this particular section.</p>
  
  <p>It's difficult to explain in words, so first of all here is a <a href="http://www.samnorris.co.nz" rel="nofollow noreferrer">link</a> to refer to...</p>
  
  <p>and here is a visual reference to give an idea of what I mean:</p>
  
  <p><img src="https://i.stack.imgur.com/pgQ6B.jpg" alt="enter image description here"></p>
  
  <p>it's a relatively minor issue obviously, but it's really beginning to bug me since everything would be close to practically perfect if it wasn't for this! </p>
  
  <p>I'm not really sure how exactly to go about fixing it or even if I can... I can't change the offset in the plugin's code because it would affect the other sections which are fine - it's just scrolling to the Work section that has the issue.</p>
  
  <p>you would think I could simply increase/decrease the size of the main header to match up, but for some reason I can't get that to work either - it seems to keep scrolling to the exact same place.</p>
  
  <p>This is the script for the plugin, with the offset being defined as -65:</p>
  
  <p>/* x09 - Scrollit.js Keyboard Navigation */</p>
  
  <pre><code>(function(e){"use strict";var t="ScrollIt",n="1.0.3";var 
  
  r={upKey:38,downKey:40,easing:"linear",scrollTime:600,activeClass:"active",onPageChange:null,topOffset:-65};e.scrollIt=function(t){var n=e.extend(r,t),i=0,s=e("[data-scroll-index]:last").attr("data-scroll-index");var o=function(t){if(t&lt;0||t&gt;s)return;var r=e("[data-scroll-index="+t+"]").offset().top+n.topOffset+1;e("html,body").animate({scrollTop:r,easing:n.easing},n.scrollTime)};var u=function(t){var n=e(t.target).closest("[data-scroll-nav]").attr("data-scroll-nav")||e(t.target).closest("[data-scroll-goto]").attr("data-scroll-goto");o(parseInt(n))};var a=function(t){var r=t.which;if(e("html,body").is(":animated")&amp;&amp;(r==n.upKey||r==n.downKey)){return false}if(r==n.upKey&amp;&amp;i&gt;0){o(parseInt(i)-1);return false}else if(r==n.downKey&amp;&amp;i&lt;s){o(parseInt(i)+1);return false}return true};var f=function(t){if(n.onPageChange&amp;&amp;t&amp;&amp;i!=t)n.onPageChange(t);i=t;e("[data-scroll-nav]").removeClass(n.activeClass);e("[data-scroll-nav="+t+"]").addClass(n.activeClass)};var l=function(){var t=e(window).scrollTop();var r=e("[data-scroll-index]").filter(function(r,i){return t&gt;=e(i).offset().top+n.topOffset&amp;&amp;t&lt;e(i).offset().top+n.topOffset+e(i).outerHeight()});var i=r.first().attr("data-scroll-index");f(i)};e(window).on("scroll",l).scroll();e(window).on("keydown",a);e("body").on("click","[data-scroll-nav], [data-scroll-goto]",function(e){e.preventDefault();u(e)})}})(jQuery)
  </code></pre>
  
  <p>unfortunately there are no related classes/ID's I could mess around with since it uses the [data] tag attribute.</p>
  
  <p>If there is any other relevant code I should add that might be helpful please let me know. Would really appreciate any help at all figuring this out! This is one of the last things I need to do before going live with the new version/build of my site :) Cheers.</p>