ScrollTo settings

[adadkuba]

Hello, I have this code:

$('.scrollup').click(function() { $.scrollTo($('body'), 700); });

I have a problem in that I have the header in the fixed position and when I scroll to body, it is hidden behind this header. Is it possible to do it to be scanned for the header + eg 100px up? or some other way is? I care about this animation.

[m3g4p0p]

Hi @adadkuba, could you provide the basic markup / CSS so we can reproduce this behaviour (or better yet, set up a fiddle or similar)? With just that line of JS it’s a bit hard to tell how to account for your header I’m afraid…

[adadkuba]

I’m sorry, here it is: https://jsfiddle.net/zxzc0/nxf4yw7j/25/

[Paul_Wilkins]

@adadkuba

I’m sorry, here it is: https://jsfiddle.net/zxzc0/nxf4yw7j/25/

Thanks. The “.scrollup” code can’t work because anchors wrapping other anchors don’t seem to be supported.

Progress can be made though with the “exer” click event that you have there instead.
What you can do is to get the height of the header and the nav, and subtract that as an offset to the scrolling.

  $('#exer-link').click(function () {
    var header = $(".header");
    var nav = $(".nav", header);
    var topOffset = header.outerHeight() + nav.outerHeight();
    $.scrollTo($('#exer'), 500, {
      offset: {top: -topOffset}
    });
  });

Details about the scrollTo settings can be found at https://github.com/flesler/jquery.scrollTo#settings

[Paul_Wilkins]

And as an improvement, you can use just the offset of the nav as the figure instead:

   $('#exer-link').click(function () {
    $.scrollTo($('#exer'), 500, {
      offset: {
        top: -$(".header .nav").offset().top
      }
    });
  });