From afaab88e8e177f1208a60edfcba1448af6b67c32 Mon Sep 17 00:00:00 2001 From: Ian Belanger Date: Tue, 12 May 2020 16:43:42 +0000 Subject: [PATCH] Bundled Themes: Twenty Twenty anchor links don't work in mobile menu. Modifies the mobile modal menu javascript, so that anchor links will close the modal and scroll to the anchor within the page. Props Giorgio25b, suzylah, yuhin, samful, bdcstr. Fixes #48916. git-svn-id: https://develop.svn.wordpress.org/trunk@47784 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-content/themes/twentytwenty/assets/js/index.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/wp-content/themes/twentytwenty/assets/js/index.js b/src/wp-content/themes/twentytwenty/assets/js/index.js index b6919261e8..c6f7a0a909 100644 --- a/src/wp-content/themes/twentytwenty/assets/js/index.js +++ b/src/wp-content/themes/twentytwenty/assets/js/index.js @@ -137,6 +137,17 @@ twentytwenty.coverModals = { var target = event.target; var modal = document.querySelector( '.cover-modal.active' ); + // if target onclick is with # within the href attribute + if ( event.target.tagName.toLowerCase() === 'a' && event.target.hash.includes( '#' ) && modal !== null ) { + // untoggle the modal + this.untoggleModal( modal ); + // wait 550 and scroll to the anchor + setTimeout( function() { + var anchor = document.getElementById( event.target.hash.slice( 1 ) ); + anchor.scrollIntoView(); + }, 550 ); + } + if ( target === modal ) { this.untoggleModal( target ); }