jQuery scroll to anchor (minus set amount of pixels)

I just had to solve this problem myself. You need to adjust your offset by the amount of pixels you want to scrollTo. In my case, I needed it to be 50 pixels higher on the page. So, I subtracted 50 from targetOffset.

Now, the part of the code that’s throwing a wobbly for you is location.hash – this is telling the browser to set its location to a specific point. In all cases, this is a string containing the ID you just scrolled to. So, it’d be something like ‘#foo’. You need to maintain this, so we’ll leave it.

However, to prevent the browser from ‘jumping’ when location.hash is set (a default browser action), you simply need to prevent the default action. So, pass your event ‘e’ through the completion function in the animate function. Then simply call e.preventDefault(). You’ll have to make sure that the browser is actually calling an event, otherwise it will error out. So, an if-test fixes that.

Done. Here’s the revised code chunk:

if (target) {
    var targetOffset = $target.offset().top - 50;
    $(this).click(function(event) {
      if(event != 'undefined') {
          event.preventDefault();}
      $(scrollElem).animate({scrollTop: targetOffset}, 400, function(e) {
          e.preventDefault();
          location.hash = target;
      });
    });
  }