Jump links

Support
#1

On my homepage, I’ve got a jump link in the “Read On” button. It’s supposed to jump to the start of section-2. Can you please help me understand why it’s not showing the top of section 2?

https://goalsarecool.com/

Thanks!
Blake

#2

Hey,

If you could post some logins details in a secure note and we`d be happy to take a look.

P.S: You can search by “secure note” on this article if you don`t know about this: https://theme.co/apex/forum/t/themeco-support-overview/288

#3

I do not provide admin access to my live site site. Here is the link I’m using

https://goalsarecool.com/#x-section-2

Why is it not working correctly?

#4

Hello There,

Thanks for updating in! The issue occurred because the height of the header is not yet. This is why the section is partly covered by the header. To resolve this issue, please add this JS code in the Theme Options > Global JS (http://prntscr.com/evswzb) or in the customizer, Appearance > Customize > Custom > Edit GLOBAL Javascript

jQuery(function($) {

  var $body                = $('body');
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  if ( $('.x-navbar-fixed-top-active .x-navbar').length > 1 ){
    var navbarFixedTopHeight = $('.x-navbar-fixed-top-active .x-navbar').outerHeight();
  } else {
    var navbarFixedTopHeight = $('.x-masthead').outerHeight();
  }
  
  var locHash              = null;
  var dragging             = false;

  var locHashIndex = location.href.indexOf('#');
  if ( -1 !== locHashIndex ) {
    locHash = location.href.substr(locHashIndex).split('/')[0];
  }

  $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 ) {

    if ( ! element ) {
      return;
    }

    try {
      var $el = $(element);
    } catch(error) {
      // abort on invalid selectors. see #610
      return;
    }

    if ( ! $el || 0 == $el.length ) {
      return;
    }

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

  }


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

  $(window).load(function() {
    animateOffset(locHash, 1, 'ease');
  });


  //
  // Scroll trigger.
  //

  $('a[href*="#"]').on('touchend click', function(e) {
    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');
      }
    }
  });

});

Hope this helps. Please let us know how it goes.

#5

Can you pleas provide more detail… what does the header have to do with this?

#6

Hi there,

When the header goes into the sticky mode it takes up a portion of the window space which should be added in the calculations of the Javascript code when scrolling to the destination position.

That functionality is available in X. In Pro, the whole smooth scroll functionality was not available. In version 1.1.1 it is available without the calculations of the sticky header. Because of the complex nature of the header builder, the calculation needs more detailed care which our development team is working on.

So in upcoming releases, we will have more efficient code calculating possible cases to force the functionality scroll to the correct position.

Thank you.

#7

Wondering if this code will work on my site? I’m trying to add a “jump to section” link as well.

#8

Hi there,

You may try but it mostly works. The only issue is when you have a different setup then its effect could be different too.

Thanks!