Accordion jQuery scroll to top Chrome

[Nayfe]

Hey there folks. I’m having an issue in Chrome & Firefox (Desktop only) with my primary accordion menu not snapping/scrolling to the top of the page. It works fine in Safari Desktop, and safari mobile, chrome mobile & firefox mobile.

Here’s the custom JS:

    jQuery(function($){
   var navbarHeight = $('.x-navbar-fixed-top').outerHeight();
   var wpadminbarHeight = $('#wpadminbar').outerHeight();
   console.log(navbarHeight, wpadminbarHeight);

   $('.x-accordion-toggle').on('click', function(){
      $('html,body').stop();
   });
});

jQuery(document).ready(function($) {
  $('.x-accordion-toggle').on('click', function(){ 
    var $this = $(this);

    setTimeout(function() {
      $('html, body').animate({
        scrollTop: $this.offset().top - $('.x-navbar').outerHeight()
      }, 200); 
    }, 400);
  });
});
jQuery(document).ready(function(){
  jQuery('.x-block-grid-item a').attr('target', '_blank');
});

Any help would be appreciated! The website is https://noughtdesign.com

[ruenel]

Hello There,

Thanks for writing in!

Please remove this block first:

$('.x-accordion-toggle').on('click', function(){
      $('html,body').stop();
   });

And then update your code and add this:

(function($) {
  $('.x-accordion-toggle').each(function(index, element){
  	var element = $(this);
  	var id = '#' + element.attr('id');

  	element.on('click touchstart', function(){
  		var navbarHeight = $('.x-navbar-fixed-top').outerHeight();
	   	var wpadminbarHeight = $('#wpadminbar').outerHeight();
	    console.log(navbarHeight, wpadminbarHeight);


	    console.log($(id).offset().top);
		$('html, body').animate({
			scrollTop: $(id).offset().top
		}, 200); 
  	});
  });
})(jQuery);

Hope this helps. Kindly let us know.

[Nayfe]

Thank you - I just updated and emptied caches, but it’s the same…

[christopher]

Hi @Nayfe,

First of all, I want to mention that you are asking about a custom JS code which is outside of our support scope and we are sorry that we did not mention this before.

Having said that, we will do our best to help you achieve your goal. The problem that I see is that the Chrome browser still loads the old code which is this one:

But the Safari browser loads the new one. So it is 100% a cache problem. Please double check your cache and purge them and the Chrome Browser cache and if needed contact your hosting service provider and ask them for help.

To test if the browser uses the new code you can show the source code in the browser and search for part of the code and see which version of the code is loaded.

Thank you.

[Nayfe]

Thank you Christopher. No problem about not supporting custom js, I understand.

I had implemented the suggested code update, but the result was negative on mobile (the moment you touched any of the accordion titles, the screen would try to scroll top, which made scrolling down the screen too difficult).

Because of this, I reverted the js, which is why it is loading the old code.

Best,

Nayfe

[christopher]

mmm… So judging by your answer it seems that the delay is not happening in the Chrome.

So if we set a delay it should first do the normal slide then go to the top of the page. Check this code please:

(function($) {
  $('.x-accordion-toggle').each(function(index, element){
  	var element = $(this);
  	var id = '#' + element.attr('id');

  	element.on('click touchstart', function(){
     var navbarHeight = $('.x-navbar-fixed-top').outerHeight();
     var wpadminbarHeight = $('#wpadminbar').outerHeight();
     setTimeout(function() {
      $('html, body').animate({
       scrollTop: $(id).offset().top
     }, 200); 
    }, 200);
   });
  });
})(jQuery);

I tried to check the code in the website but as the previous code is in place it is not working.

kindly get back to us with the result of the steps above and URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case if you still have problems.

Thank you.

[Nayfe]

Hi Christopher. Thank you for looking at it again. It gives the same results as before, when you scroll on mobile chrome/firefox, it wants to scroll up top. On mobile, what I’m trying to achieve really is that the second-click/touch opens the accordion and scrolls it to the top. That’s how it works on mobile with the original code, just not on the desktop version of chrome/firefox. Your new code is live now if you wish to check?

[Alaa]

Hi @Nayfe

Actually, both snippets mentioned by @christopher.amirian and @RueNel should work fine, the thing is the browser can’t initiate the ‘scrollTop’ if ‘overflow-x’ was appended to html element, so I’ve added this CSS snippet to (Theme Options > CSS) and I can see it’s working fine now:

html {
    overflow-x: initial;
}

Thanks.

[Nayfe]

Hi all, that’s an awesome job to fix the desktop version across Chrome & Firefox - However, it breaks the mobile experience of being able to scroll up and down the page without it snapping to the top, then being free to select an item, which then expands and scrolls the title to the top. So close! But I can’t sacrifice the mobile experience in favour of the desktop experience.

[Alaa]

Hi @Nayfe

I’ve re-added the code and tested it on multiple mobile devices and desktop browser, it’s working just fine. It must be caching issue then, try other mobile devices or make sure to clear cache on your mobile browser as well.

Please check this screencast.

Thanks.

[Nayfe]

Ah awesome! Caching is super frustrating sometimes - I purged all the W3tc caches and all my browser caches a bunch of times. Should have restarted my router. It seems to be working great here now (UK). Thanks everyone! And the over-and-above support for custom js was very much appreciated.

[nico]

Hi @Nayfe,

Happy to hear that

Feel free to ask us again.

Thanks.