Menu button auto-scrolls to top when pressed + Scroll to Top change button icon.
-
Hi,
I have run into two problems related to the menu button:
1. When pressed, the page returns to the beginning (auto-scrolls to top).
The CSS that I use so that the Header is fixed is the following:
.site-header {position: sticky; top: 0; z-index: 2;}
My goal is that by activating and deactivating the menu button, the page stays where it was.2. When activating a Scroll to Top by using #anchor, the animation of the menu button changes, but without activating the menu, and the symbol is turned upside down.
How To Reproduce
Width < 1240px
Video showing: https://youtu.be/zW7R58KM_BAI’m not sure if 1 is related with 2.
The page I need help with: [log in to see the link]
-
Solved:
Both problems were in primary-navigation.js
1.
if ( mobileButton ) { mobileButton.onclick = function() { wrapper.classList.toggle( id + '-navigation-open' ); wrapper.classList.toggle( 'lock-scrolling' ); twentytwentyoneToggleAriaExpanded( mobileButton ); mobileButton.focus(); }; }Change
wrapper.classList.toggle( 'lock-scrolling' );
to
//wrapper.classList.toggle( 'lock-scrolling' );Lock scrolling makes the page to scroll up when you press the menu button. Deactivating it, you solve that problem.
That change may trigger some glitches because the scrolling on the page is not locked. At first sight, it’s not making any problem on the front-end. It may provoke a “double” scroll bar in PC screens if the menu is too large, not in my case. On tablets and phones, that problem won’t show up. Scrolling in the menu is working as expected.
2.
document.addEventListener( 'click', function( event ) { // If target onclick is <a> with # within the href attribute if ( event.target.hash && event.target.hash.includes( '#' ) ) { wrapper.classList.remove( id + '-navigation-open', 'lock-scrolling' ); twentytwentyoneToggleAriaExpanded( mobileButton ); // Wait 550 and scroll to the anchor. setTimeout(function () { var anchor = document.getElementById(event.target.hash.slice(1)); anchor.scrollIntoView(); }, 550); } }Change
document.addEventListener( 'click', function( event ) {
to
document.querySelector('.primary-menu-container').addEventListener( 'click', function( event ) {The function was being activated all the time, and that function should only work when the mobile menu is open. Now, you can use #anchors to move on the same page off the menu without “glitching” the menu icon.
That change is tested and working without any problems.
Hi,
Nice work!
I would say that the second fix you mention here definitely needs to be included in the next theme update!
What do you think @macmanx ?
Oliver
Yes, would you please report that via https://core.trac.wordpress.org/newticket ?
Please use the “Bundled Theme” component and start the Summary field with
Twenty Twenty-One:Done.
The topic ‘Menu button auto-scrolls to top when pressed + Scroll to Top change button icon.’ is closed to new replies.
