"Click to" content band: Offset

[krisrogers]

I have programmed text, images, and buttons to snap when clicked, to a particular content band on a page - it works perfectly, however there is an offset for each instance. Instead of bringing to the top of said container of content, it brings the screen to about 50px below the top.

I’ve adjust content padding to see if that would help - it does not.

Need a fix.

[nabeel]

Hi there,

Thanks for writing around! To fix this can you please add the following script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($) {

  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = $('.hm1').outerHeight();
  var locHref              = location.href;
  var locHashIndex         = locHref.indexOf('#');
  var locHash              = locHref.substr(locHashIndex);
  var dragging             = false;
  
  $body.on('touchmove', function() {
      dragging = true;
  } );
  
  $body.on('touchstart', function() {
      dragging = false;
  } );


  //
  // Calculate the offset height for various elements and remove it from
  // the element's top offset so that fixed elements don't cover it up.
  //

  function animateOffset( element, ms, easing ) {
    $('html, body').animate({
      scrollTop: $(element).offset().top - adminbarHeight - navbarFixedTopHeight + 1
    }, ms, easing);
  }


  //
  // Page load offset (if necessary).
  //

  $(window).load(function() {
    if ( locHashIndex !== -1 && $(locHash).length ) {
      animateOffset(locHash, 1, 'linear');
    }
  });


  //
  // Scroll trigger.
  //

  $('a[href*="#"]').off('touchend click').bind('touchend click', function(e) {
      console.log($('.hm1.x-bar-fixed').outerHeight());
    href        = $(this).attr('href');
    notComments = href.indexOf('#comments') === -1;
    if ( href !== '#' && notComments ) {
      var theId = href.split('#').pop();
      var $el   = $('#' + theId);
      if ( $el.length > 0 ) {
        e.preventDefault();
        
        if (dragging) {
            return;
        }
        
        animateOffset($el, 850, 'easeInOutExpo');
      }
    }
  });
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[krisrogers]

That works great thank you.

[friech]

You’re more than welcome, glad we could help.

Cheers!