Twenty Twenty-One: Anchor link on the same page causes the menu button icon to turn upside down

[joelbermudez]

As reported and requested in ​https://wordpress.org/support/topic/menu-button-auto-scrolls-to-top-when-pressed-scroll-to-top-change-button-icon/.

If you have an anchor link on the same page, the icon turs upside down.
Example. In website.com/one/ if you add a link to website.com/one/#anchor, this will cause the issue. An example will be a scroll to top button as in the report mentioned.

Video showing (the bug report is for the second option. The first one was solved too in the report, but may not be the best solution, and, as the theme is not prepared to have a fixed header, and the problem is that when clicking the menu button, it automatically scrolls to the top, may not be relevant, but you can check on the report mentioned at first).

In the video you can see in 0:09 when I click "ARRIBA", that is a scroll to top in casael.com using casael.com/#inicio

​https://youtu.be/zW7R58KM_BA

Problem is in primary-navigation.js

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);
            }
        }

Possible Solution:

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.

[sabernhardt]

Thanks for the report!

Related: #53331

[karthickmurugan]

Patch file for scroll issue when mobile menu closes

[karthickmurugan]

Hello.,

I have created a patch for the second issue which is clicking on the mobile menu close button, scroll the site to top, if it is scrolled to the middle position. The first issue seems to be solved in this ticket 53331

[sabernhardt]

(The issue occurred before 6.7, possibly as early as 5.6.)

[karthickmurugan]

Replying to sabernhardt:

(The issue occurred before 6.7, possibly as early as 5.6.)

Thanks @sabernhardt for updating it.

[rinkalpagdar]

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/53976/53976.patch

Environment

• WordPress: 6.8-alpha-59274-src
• PHP: 8.2.25
• Server: nginx/1.27.2
• Database: mysqli (Server: 8.0.40 / Client: mysqlnd 8.2.25)
• Browser: Chrome 131.0.0.0
• OS: macOS
• Theme: Twenty Twenty-One 2.4
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ✅ Issue resolved with patch.

[ozgursar]

Reproduction Report

Description

This report validates whether the issue can be reproduced.

Environment

• WordPress: 7.0-alpha-61215-src
• PHP: 8.2.29
• Server: nginx/1.29.4
• Database: mysqli (Server: 8.4.7 / Client: mysqlnd 8.2.29)
• Browser: Chrome 144.0.0.0
• OS: macOS
• Theme: Twenty Twenty-One 2.7
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.1

Steps to Reproduce

1. Install and activate Twenty Twenty-One
2. Create a page and add some text or image as content
3. Add an anchor link somewhere around the top of the page (e.g. pagetop)
4. Create a back to top link at the bottom of the page or at the footer with anchor @pagetop
5. View the page in frontend
6. Open Chrome Dev Tools and narrow viewport to be able to see mobile menu
7. Click the "back to top" link to trigger the anchor

Actual Results

1. ❌ Error condition does not occur (unable to reproduce bug)

Additional Notes

• Having checked the primary-navigation.js the mentioned by @joelbermudez, and reading further about this topic, issue seems to have resolved with the changeset https://core.trac.wordpress.org/changeset/55124

[sabernhardt]

Duplicate of #53331.

I'll close this. The icon issue should have been corrected as part of [55124].

The support topic also mentions an issue with scrolling if the site positions the header with fixed or sticky. I agree that it is better not to edit the theme for everyone so it would accommodate that special situation. (And in that case, changing the CSS to sticky might work better than editing the script.)

@media only screen and (max-width: 481.98px) {
	.lock-scrolling .site {
		position: sticky;
	}
}