Modify code to make scroll to anchor minus set amount of pixels

I am using the following code to scroll to anchor points with jQuery:

    $(document).ready(function() {
      function filterPath(string) {
      return string
        .replace(/^\\//,'')
        .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
        .replace(/\\/$/,'');
      }
      var locationPath = filterPath(location.pathname);
      var scrollElem = scrollableElement('html', 'body');

      $('a[href*=#]').each(function() {
        var thisPath = filterPath(this.pathname) || locationPath;
        if (  locationPath == thisPath
        && (location.hostname == this.hostname || !this.hostname)
        && this.hash.replace(/#/,'') ) {
          var $target = $(this.hash), target = this.hash;
          if (target) {
            var targetOffset = $target.offset().top;
            $(this).click(function(event) {
              event.preventDefault();
              $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
                location.hash = target;
              });
            });
          }
        }
      });

      // use the first element that is "scrollable"
      function scrollableElement(els) {
        for (var i = 0, argLength = arguments.length; i <argLength; i++) {
          var el = arguments[i],
              $scrollElement = $(el);
          if ($scrollElement.scrollTop()> 0) {
            return el;
          } else {
            $scrollElement.scrollTop(1);
            var isScrollable = $scrollElement.scrollTop()> 0;
            $scrollElement.scrollTop(0);
            if (isScrollable) {
              return el;
            }
          }
        }
        return [];
      }

    });

Is there anyway to make it scroll to that anchor but minus a set amount of pixels? (in my case i want it to go -92px)

Thanks for any help.

Yes, it would be the targetOffset that you want to adjust there.

could you advise how i go about that? I’m not Javascript savvy unfortunately…

Sure.

Do not just dump -92 into the middle of the code, because that then makes it impossible for anyone to understand what it’s supposed to do.
Instead, set a variable to store the -92 offset in a variable, so that it’s perfectly clear what it is for.


var scrollOffset = -92;
var thisPath = ...

Then update the targetOffset assignment, so that it also uses your scrollOffset variable.


var targetOffset = ... - scrollOffset;

Where the ellipses are what is currently there.

Ok i’m fairly sure I have followed what you said and after setting the variable I have modified the line of code to this:

var targetOffset = $target.offset().top - scrollOffset;

but it has no effect?

Of course it doesn’t, because you only followed the second part of my instructions.

no, I said that I had set the variable…

var scrollOffset = -92;
    var thisPath = filterPath(this.pathname) || locationPath;
    if (  locationPath == thisPath
    && (location.hostname == this.hostname || !this.hostname)
    && this.hash.replace(/#/,'') ) {
      var $target = $(this.hash), target = this.hash;
      if (target) {
        var targetOffset = $target.offset().top - scrollOffset;

As you can see here…it does not work though.

What about it doesn’t work?

Is it that the “- scrollOffset” needs to be “+ scrollOffset” instead?

I had tweaked it last night, but now it scrolls to where i want (- 92 pixels) but immediately jumps back to its original scroll position instead of staying at the -92 pixel mark?

Can you put up a sample version of what you’ve done at jsfiddle.net or somewhere else, for testing purposes?