Scroll buttons not working

[eradmin]

I have several buttons throughout my site that, when clicked, scroll to a specific section on their page. All of the buttons worked before, but since updating to the latest version of X and Cornerstone, they are not working anymore and I cannot seem to figure out why.

I am using section IDs as the anchors for each button and the code I am using for each button is as follows…

<a href="#explore">

In this example the section ID name would be explore.

What is interesting is that when I right click each one of these buttons and hit “open link in new tab” it takes me right to the appropriate section in the new tab. Any assistance would be greatly appreciated.

URL: www.earthroamer.com/xv-lt

[ruenel]

Hello There,

Thanks for writing in! I have checked the page and I can confirm the issue. Could you please remove this JS code in your Cornerstone’s custom JS section first?

jQuery(document).ready(function($) {
  $('a[href*="#"]').off('touchstart click');
  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = $('.x-navbar-fixed-top-active .x-navbar').outerHeight();
  var locHref              = location.href;
  var locHashIndex         = locHref.indexOf('#');
  var locHash              = locHref.substr(locHashIndex);

  //
  // 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 - 135
    }, ms, easing);
  }

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

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

  //
  // Scroll trigger.
  //

  $('a[href*="#"]').on('touchstart click', function(e) {
    $href            = $(this).attr('href');
    notComments      = $href.indexOf('#comments') === -1;
    notAccordion     = $href.indexOf('#collapse-') === -1;
    notTabbedContent = $href.indexOf('#tab-') === -1;
    if ( $href !== '#' && notComments && notAccordion && notTabbedContent ) {
      var theId = $href.split('#').pop();
      var $el   = $('#' + theId);
      if ( $el.length > 0 ) {
        e.preventDefault();
        animateOffset($el, 850, 'easeInOutExpo');
      }
    }
  });

  //
  // Initialize scrollspy.
  //

  if ( $body.hasClass('x-one-page-navigation-active') ) {

    $body.scrollspy({
      target : '.x-nav-wrap.desktop',
      offset : adminbarHeight
    });

    //
    // Refresh scrollspy as needed.
    //

    $(window).resize(function() {
      $body.scrollspy('refresh');
    });

    var timesRun = 0;
    var interval = setInterval(function() {
      timesRun += 1;
      var newBodyHeight = $body.outerHeight();
      if ( newBodyHeight !== bodyHeight ) {
        $body.scrollspy('refresh');
      }
      if ( timesRun === 10 ) {
        clearInterval(interval);
      }
    }, 500);

  }

});

This could be the cause of your issue. This JS code turns off the anchor links when clicked.

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

[eradmin]

Thank you for your help. That solved the problem. I’m not really even sure what the JS was achieving for the page, as once it was removed nothing broke (at least as far as I can tell).

One last thing that is semi-related. Now, when you hit one of the scroll buttons in the transparent submenu, the submenu overlaps the section that the button takes you to. Is there a way to build in a little bit of a buffer so that the transparent submenu does not overlap the heading for each section? Thanks for your help!

[ruenel]

Hello There,

To resolve the final issue, please do these two things:

• Go to X > Theme Options > Headers > Navbar and the the Navbar Top Height to at lease 70 pixels.
• Edit the respective pages and a top padding for each section to at least 35 pixels.

This is the only way because your transparent submenu is actually a section positioned as fixed and not part of the header which is why it is covering the content when you go to the section when clicking the links.

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

[eradmin]

Works like a charm. Using the padding at the top of each section does add a little bit of dead space between sections, but at 35px, it really isn’t much of an issue at all. Thanks again for all your help.

[Prasant]

You are most welcome.