Close button of off-canvas menu scrolls to top

  • Christoph

    (@camthor)


    3 years ago

    Thank you for that beautiful and user-friendly theme!

    I show a menu with URL fragments as custom links, such as “#first”, ‘#second”. When I test it on a mobile screen with the off-canvas menu (Firefox), the page scrolls correctly to the corresponding anchor. But when I click the “X” to close the menu, the page jumps back to the top.

    I managed to circumvent that issue by detaching the event from the <a class="mobile-menu-close" href="#"> ... </a> element (by cloning the element) and then re-attaching the same again with a short delay.

    const ready = (callback) => {
  if (document.readyState != "loading") callback();
  else document.addEventListener("DOMContentLoaded", callback);
}

ready(() => {
 setTimeout(function(){
  const closeButton 	= document.getElementsByClassName( 'mobile-menu-close' )[ 0 ];
  const closeButtonClone = closeButton.cloneNode(true);
  closeButton.parentNode.replaceChild(closeButtonClone, closeButton);
  const offCanvas = document.getElementsByClassName('sydney-offcanvas-menu')[0];
	
  closeButtonClone.addEventListener( 'click', function(e) {
   e.preventDefault();
   closeButtonClone.focus();
   closeButtonClone.classList.remove( 'open' );
   offCanvas.classList.remove( 'toggled' );
   document.body.classList.remove( 'mobile-menu-visible' );
  } );
 },1000);
});

    I cannot explain why, but now it doesn’t scroll up when closing the menu. Maybe this helps you somehow.

Viewing 4 replies - 1 through 4 (of 4 total)

  • Sydney Version: 2.01

    Fist of all thanks for the theme and the 2.0 upgrade.
    I confirm that problem. Basically the “Off-Canvas Mode” (mobile version) of menu is unusable with a one-page-site scenario.
    The menu remains open if I click on menu items. The page scroll up and down in the background (and I can’t see the content of site) and if I try to use the close icon te page go on top.

    Let us know. Thanks

    Hi all,

    The better solution for the case like this maybe closing the mobile menu once the one page menu item is clicked. Try this code:

    (function($){

    if( matchMedia('only screen and (max-width: 1024px)') ) {
        $( document ).on('click', function(e){
            if( !$( e.target ).closest('.menu-toggle').length ) {
                $('.sydney-offcanvas-menu').removeClass('toggled');
            }
        });
    }

})(jQuery);

    Regards,
    Kharis

    Your patch works for me! Many Thanks
    I hope that this problem will be considered in the next releases.

    jwolong

    (@jwolong)

    Hi @kharisblank sorry if it seems a bit obvious but where does this code need to be inserted? (eg functions.php)?

    Thank you

    • This reply was modified 3 years ago by jwolong.
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Close button of off-canvas menu scrolls to top’ is closed to new replies.