Make WordPress Core

Opened 5 weeks ago

Last modified 7 days ago

#49025 new defect (bug)

Twenty Twenty: Modal menu link with hash should scroll to that section on the page.

Reported by: acosmin Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.3.1
Component: Bundled Theme Keywords:
Focuses: ui, javascript Cc:
PR Number:


Based on this support ticket: https://wordpress.org/support/topic/possible-bug-anchor-links-dont-work-in-js-flow-out-menu/

A possible fix would be to add this code in index.js, after line 156:

goToAnchor: function() {
	document.addEventListener( 'click', function( event ) {
		var target = event.target;

		if ( target.closest( '.modal-menu' ) && 'a' === target.tagName.toLowerCase() ) {
			var url, targetHref;
			url = location.href.split( '#' )[ 0 ];
			targetHref = target.href;
			this.untoggleModal( target.closest( '.cover-modal.active' ) );

			if( '' !== target.hash && -1 !== targetHref.indexOf( url ) ) {
				setTimeout( function() {
					var fakeEl = document.createElement( 'a' );

					fakeEl.href = targetHref;
				}, 550 );
	}.bind( this ) );

And after line 105, a call to the method: this.goToAnchor();

Change History (2)

#1 @raQai
12 days ago

This fix does not work reliably. Sometimes it works, sometimes it doesn't. Currently I do not have reproducible cases for working and non working behavior. Will update once I figured it out.

See https://foos.bogdan-iws.de/angebot/

"Menu" > "Angebot" > "Kicker Jugend" uses the anchor /angebot/#jugend
"Menu" > "Angebot" > "Für Unternehmen" uses the anchor /angebot/#unternehmen

Chromium 79.0.3945.88 (Official Build) Arch Linux (64-bit)

#2 @raQai
7 days ago

I found the issue. It was related to the Menu Image (https://de.wordpress.org/plugins/menu-image/) plugin since it creates span elements within the a link elements of the menu if images are present.

This would then trigger the click event on the span instead of the a resulting in 'a' === target.tagName.toLowerCase() returning false.

my temporary solution looks like this:

	goToAnchor: function () {
		document.addEventListener('click', function (event) {
			var target = event.target.closest('a');

			if (target && target.closest('.modal-menu') && 'a' === target.tagName.toLowerCase()) {
				var url, targetHref;

				url = location.href.split('#')[0];
				targetHref = target.href;


				if ('' !== target.hash && -1 !== targetHref.indexOf(url)) {
					setTimeout(function () {
					}, 700);

After further testing (especially on mobile devices) I figured the timeout of 550 ms is not enough for some browser/device combinations to wait for the menu to be closed. Changing this value to 700ms solved this issue on my test phones.

I also prefer #scrollIntoView instead of creating a fake element using #createElement.

Last edited 7 days ago by raQai (previous) (diff)
Note: See TracTickets for help on using tickets.