Anchor & menu problems (PRO)

[rulogrunge]

Hello there!

I’m having problems with a footer menu and it’s anchors. Lookin on the forum I’ve found another thread with a similar problem and I’ve applied the following code on the JS custom:

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

var $body = $(‘body’);
var bodyHeight = $body.outerHeight();
var adminbarHeight = $(’#wpadminbar’).outerHeight();
var navbarFixedTopHeight = 58;
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');
  }
}

});
});

The code resolved the spacing on my sticky header, so now, when I jump from any page to the desired link the space is correct so the content starts before the header.

The problem now is that I have a footer menu with the same anchors and the anchors does not work on this page, in any other does.

Any suggestions?

[nabeel]

Hi there,

Thanks for writing in! Try replacing your code with the following code:

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

  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = 190;
  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');
      }
    }
  });
});

Let us know how this goes!

[rulogrunge]

Hello @Nabeel

The code worked awsome!

Thank you!!!

[rulogrunge]

Hi there

The code given worked perfectly, but now I’m facing another issue. I have a global footer with a # ID in it, on the header is the “CONTACT” link, this link made the page scroll down to the footer, into a contact form.

This link works fine on desktop version but it don’t on mobiles, what can I do?

[ruenel]

Hello There,

Please update the code. You must find this:

$('a[href*="#"]')

and replace it with this:

$('a[href*="#"]:not(.e129-16)')

Please let us know if this works out for you.

[rulogrunge]

Hello @RueNel

I’ve replaced the code given and still not working, any other suggestions?

Thanks!

[rad]

Hi there,

Please replace this line

$('a[href*="#"]').unbind('touchend click').bind('touchend click'

with this

$('a[href*="#"]').off('touchend touchstart').on('click'

But it may not work since the section when it needs to scroll to is hidden on mobile. Perhaps you can add them in 1 section and only separate them in two rows? Instead of 1 section for each device? I’m referring to contact section.

Thanks!

[rulogrunge]

Hello @Rad @RueNel and @Nabeel

Following your instructions I’ve found the solution, I’ve made specific menus for mobile and desktop versions and changes the #ID’s made them unique, now both menus and anchors work fine!

Now I have ANOTHER issue

When you press the “contact” anchor the menu does not hide, how can I do that?

Thank you all for the awesome feedback!!!

[nabeel]

Hi again,

To close the mobile menu as well, please replace your final code with the following code:

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

  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = 190;
  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 touchstart').on('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;
        }
        console.log($el);
		$('.x-anchor.x-anchor-toggle').click();
        animateOffset($el, 850, 'xEaseInOutExpo');
      }
    }
  });
});

Let us know how this goes!

[rulogrunge]

Hello @Nabeel

That worked! Thank you so much to all.

[rulogrunge]

Hello again @Nabeel

Guess I celebrate too soon, certainly the menu hides on click, but when I press another anchor (on the global footer menu), the page scrolls to the desired anchor and opens the menu again)

The first video show the correct menu hiding on click:

On the second one, you can see the scroll to the bottom, and then, when I click on any link on the menu, the page goes to the desired one, and then it opens the menu:

How can this be fixed?

Thank you so much for the support!

[nabeel]

Hi again,

Please replace the previous code with this:

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

  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = 190;
  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 touchstart').on('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;
        }
        console.log($el);
		if($('.x-anchor.x-anchor-toggle').hasClass('x-active') && $('.x-menu.x-menu-dropdown.x-dropdown').hasClass('x-active')) {
			$('.x-anchor.x-anchor-toggle').click();
		}
        animateOffset($el, 850, 'xEaseInOutExpo');
      }
    }
  });
});

Let us know how this goes!

[rulogrunge]

Hello @Nabeel

I’ve put the code given and it worked fine, but, when I clicked on the menu and then “Contact” the menu does not hide again! I’m no programmer but reading the code and the feedback given, I’ve managed to make it work with this:

---

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

var $body = $(‘body’);
var bodyHeight = $body.outerHeight();
var adminbarHeight = $(’#wpadminbar’).outerHeight();
var navbarFixedTopHeight = 190;
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 touchstart’).on(‘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;
    }
    console.log($el);
	$('.x-anchor.x-anchor-toggle').click();
    animateOffset($el, 850, 'xEaseInOutExpo');

if($('.x-anchor.x-anchor-toggle').hasClass('x-active') && $('.x-menu.x-menu-dropdown.x-dropdown').hasClass('x-active')) {
		$('.x-anchor.x-anchor-toggle').click();
	}
  }
}

});
});

Right now this do the trick, but, if you find an error on my “coding” please give me your feedback, if not, hope this solution help to others.

Thank you!!!

[nabeel]

Hey there,

Your code looks fine to me and we’re glad you managed to solve the issue on your own and thank you for the sharing the solution with us.

Cheers!