#pro sticky header with anchor links scrolls too far

[ruenel]

Hello There,

Sorry bout that. I have inspected your site particularly this page: http://projects.cornerstonetemplates.store/#about. I can see the issue here that the header is covering the header. We need to add something that will move the section down. You can make use of this code:

(function($){
  var pageAddress = window.location.hash;

  if ( pageAddress || pageAddress != '' ) {

    console.log(pageAddress);

    var navbar = $('.x-navbar').outerHeight();
    var yloc = $(pageAddress).offset().top - $('.x-bar-fixed').height();
    console.log($(pageAddress).offset().top);
    console.log('tab: ' + pageAddress + ', yloc: ' + yloc);

    $('html, body').animate({
        scrollTop: yloc
      }, 850, 'easeInOutExpo');
  }
  
})(jQuery);

We would loved to know if this has work for you. Thank you.

[Johanschack]

Hi @RueNel,

Thanks for the quick reply.

I added this to the front page JS, but it doesn’t seem to have helped. I’ll add the login details, so you can test it if you want.

Best,
Johan

[nabeel]

Hi @Johanschack,

I went ahead and added the following code 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 = $('.hm11').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*="#"]').unbind('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');
      }
    }
  });
});

It seems to have fixed the issue, clear your browser’s cache and reload the site.

Let us know how this goes!

[Johanschack]

Thanks @Nabeel , that works.

Will i be able to move this to the specific page’s JS instead of global?

[nabeel]

Hey there,

Glad it works. Yes you can move the code anywhere.

Cheers!

[rad]

As addition, I will personally recommend it to be global if you’re going to do scroll automation in multiple pages. Thanks!

[toddbenton]

Thanks for this. I was able to use it on a client site by changing the navbarFixedTopHeight element from .hm11 to .h-masthead.

[nabeel]

Glad it helped you as well.

Cheers!

[Nuera]

Would it be possible to get a similar fix for a site we’re working on?

This is the link in question: https://www.test.betdsi.com/casino/#baccarat

I attempted to apply the suggested fix, but couldn’t get it to scroll quite far enough. I needed to add an additional 50 or so pixels.

Thanks!

[ruenel]

Hey There,

Please have the JS code updated and use this instead:

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

  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = $('.x-masthead').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*="#"]').unbind('touchend click').bind('touchend click', function(e) {
      console.log($('.x-masthead').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');
      }
    }
  });
});

We would loved to know if this has work for you. Thank you.

[Nuera]

Perfect, thanks!

[christopher]

Glad that we could be of a help

[llribas]

I’m in a similar or very similar case: I have a “sticky header”, and I would like anchor links to “ids” in the same page to calculate the offset “header height”, if not the sticky header is overlaping the desired margins.

I’m trying the js code here, but when I use it the scroll buttons stop working.

I use two types of anchors: the scroll button provided by the theme, and custom buttons to archor points. Here you can see it:

• Theme scroll button: http://nn.anacondagroup.com/custom-projects/
• Custom anchor: http://nn.anacondagroup.com/smartmonitor/

It would be nice that the theme itself take this in account when you select sticky header.

Thank you for your help.

[ruenel]

Hello There,

Thanks for updating this thread. I can confirm that the scroll button does not display the content section correctly. I’ve submitted this to our issue tracker so the developers will be made aware of it. Once they’ll fix it, it will be updated and will be rolled out in the next update release cycle.

Please bear with us. Thanks.

[thinkthalamus]

i know this thread is old, but i’ve bumped into the same problem as llribas today (11 oct 2019, pro 7.0.4).

i played about with the above JS a little, and discovered that jquery has changed the easing options in the interim which is why it didn’t work (at all) for me. changing line 62 got things working:

animateOffset($el, 850, ‘xEaseInOutExpo’);

notice the added ‘x’ in ‘xEaseInOutExpo’

i also found that my ‘navbarFixedTopHeight’ selector needs to be ‘.masthead’ to correctly determine the offset.

here’s the full code for copy-n-paste:

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

  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = $('.masthead').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*="#"]').unbind('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, 'xEaseInOutExpo');
	  }
	}
  });
});

[Prasant]

Hello @thinkthalamus,

Thanks for writing in!

As this is a very old thread and to avoid any confusion, I request you to please create a new ticket, share the details in the same and someone from Themeco support team will take a look.

How To Get Support

Thanks for understanding.

[thinkthalamus]

hi prasant,

but … i don’t need any support. as my post indicates, i managed to fix the problem.

this thread was among the first 5 hits for me when searching for the problem, and i thought it might be useful for others to see my fix - especially the ‘xEaseInOutExpo’ bit.

[knroosevelt1]

Where do we copy and past this code?

Thanks for your help. We are having issues too!

[thinkthalamus]

open ‘theme options’ and then look for the ‘JS’ button down the left hand side. past the code into that window and make sure you hit ‘save’ at the very bottom left.

[ruenel]

Hey Kirk,

It is best that you open up your issue in a separate thread. Meanwhile, you can find the Custom JS section in X(Pro) > Theme Options > Custom JS.

@thinkthalamus:
Thanks for chiming in!