Single Page Navigation Chrome - no scrolling to anchors anymore - jumping

Support
#1

The single page navigation on Chrome doesnt scroll to the anchors anymore, it simply jumps there as in plain html.
What do I have to do to bring back the scroll effect?

No Js errors, smooth scroll installed.

#2

Hi Hei,

This kind of issue is mostly caused by a plugin conflict. Can you try disabling other plugins and check if the issue is still there?

Thanks!

#3

Tried disabling all one by one, but no effect unfortunately. Also my plugin setup hasn’t changed much in the last year…

#4

Piggy backing on this post - I’m having the same issues as above with one of our sites. I’ve deactivated all my plugins but it is still jumping around instead of scrolling in Chrome. Everything is up to date and we’re running the latest versions of X/Cornerstone.

https://floridasmartinsurance.com/

Thanks in advance for looking into this further!

1 Like
#5

Hey guys,

We’re sorry for the confusion. This is a known bug that was introduced earlier than the current stable version so I’d recommend that if you don’t need the features of our latest version, revert from a previous working state of your site.

Otherwise, you’d need to add this custom JS in Theme Options > JS which you need to remember to remove once this issue is officially fixed.

jQuery(document).ready(function($) {
  function scrollToSection(event) {
    event.preventDefault();
    var $section = $($(this).attr('href')); 
    $('html, body').animate({
      scrollTop: ($section.offset().top - $('.x-navbar-wrap').outerHeight())
    }, 1000);
  }
  $('.menu-item a').on('click', scrollToSection);
}(jQuery));

In our latest version Changelog, you see that this issue was thought to be fixed but it’s not. Please disregard the Bugfix and kindly wait for the succeeding releases.

We’re very sorry for the inconvenience.

1 Like
#6 
$($(this).attr('href'));

This doesn’t work as the links are url/#anchor not just #anchor. Maybe with some regex…

    jQuery(document).ready(function($) {
      function scrollToSection(event) {
        event.preventDefault();
        var $section = $(RegExp(/\#(.*)$/).exec($(this).attr('href'))[0]);
        $('html, body').animate({
            scrollTop: ($section.offset().top - $('.x-navbar-wrap').outerHeight())
        }, 1000);
      }
    $('.menu-item a').on('click', scrollToSection);
  }(jQuery));
#7

But unfortunately having also non-anchor links in my menu, so this doesn’t help. You mind trying again?

#8

Having the same issue - the above code is not working for me. Thanks in advance for your help!

#9

@atjonesen what I’ve posted works for your page

#10

Hello @Ede and @atjonesen,

You may use this updated code temporarily while our developers are fixing the issue:

jQuery(document).ready(function($) {
  function scrollToSection(event) {
    event.preventDefault();
    var section = '#' + $(this).attr('href').split('#')[1];     
    $('html, body').animate({
      scrollTop: ($(section).offset().top - $('.x-navbar-wrap').outerHeight())
    }, 1000);
  }
  $('.menu-item a').on('click touchstart', scrollToSection);
}(jQuery));

Kindly let us know how it goes.

#11

@RueNel You haven’t even read what I’ve written at all unfortunately. Instead you’ve just replaced the regex with array.split, which doesnt make any difference and is totally unnecessary here. Your solution should take also non-anchor links in consideration. Poor answer…waste of time again, yours and mine. And a working solution is still missing…

#12

Hello @Hei,

I am only trying to help with the code for a temporary solution that may help in your case. I have replaced your regex with the code that is working in most of the sites and our tests. I also understand that you knew already that @Christian mentioned that this is a bug. I am trying to give something that might be a temporary fix for the moment.

Please accept my apology if my answer is poor for you. I have back read the thread and I am jusr responding first to this one:

This doesn't work as the links are url/#anchor not just #anchor.

which is why I have suggested to have the other code.

And to answer the problem that applies to non hashed links, this tweaked code might help you:

(function($) {
  $('.menu-item a').each(function(element) {
    var element = $(this);
    var section = element.attr('href').split('#')[1];
    console.log(section);
    element.on('click touchstart', function(e){
      if ( section != '' ){
        e.preventDefault();
        $('html, body').animate({
            scrollTop: ($( '#' + section).offset().top - $('.x-navbar-wrap').outerHeight())
          }, 1000);
      }
    });
  });
})(jQuery);

If this code still does not work for you, I would suggest that we wait for our developers to fix this issue in the next release update cycle.

Thank you for your understanding.

#13

Thanks for that.

I am only trying to help with the code for a temporary solution that may help in your case.

Not sure what you are going for with this answer. Is it my fault that you programmed that bug in there?
It’s your fault and your fault only that this thread even exists, so excuse me to ask for help…

I have back read the thread and I am jusr responding first to this one:

That’s why you havent read the the whole thread before answering, hence a waste of time as you see now.

#14

Not to mention this kind of timewaste…

#15

Hey @Ede,

We’re very sorry for all that including the bug.

I just like to add that using Full URLs in a One Page Navigation setup is not recommended because it will highlight all of the menu items with hash on page-load like what you have now.

The common reason why users setup Full URLs is so they could still use the One Page Menu globally. But, our developers do not support that in X mainly because of the highlight problem above which I believe is tricky to change. That might be the reason why the menu highlight system is different in Pro Header.

The correct setup is using 2 menus. 1 menu should use Full URLs with hash and set as the Primary Menu. The other menu should use hash only and this menu is set as the One Page Navigation menu under the Page Settings. See https://theme.co/apex/forum/t/features-how-to-setup-one-page-navigation/96

Hope that helps.

#16

We’ve talked about it https://theme.co/apex/forum/t/all-menu-items-get-initialized-as-current-menu-item/46897

‘The only thing that needs enhancement now is the domain detection…I’ll post this in our issue tracker.’

That’s been a year ago…

So your developers decide that they ‘do not support that in X…’ instead of fixing the issue the hard way?

#17

Hey @Ede,

Thanks for pointing out the thread. A few days after posting the issue, our core developer has responded that it won’t be enhanced as it is complex and there would be a significant breaking change.

We could not reply back to threads regarding our developer’s response as it is not feasible to keep track of all threads with this concern.

Thank you for understanding.

#19

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.