소스 검색

Themes: Fix anchor link behavior on Varia/Seedlet child themes

As described in https://github.com/Automattic/themes/issues/3520,
certain child themes of Varia and Seedlet were not handling menu links
correctly when they were navigating to anchor IDs on the page the user
was currently on. An existing bit of logic was already implemented in
the twentytwentyone theme to address this use case, so this diff ports
it into the asset scripts for Varia and Seedlet as well.

Ported from D62296-code
Matthew Reishus 4 년 전
부모
커밋
07038935d7
2개의 변경된 파일28개의 추가작업 그리고 0개의 파일을 삭제
  1. 13 0
      seedlet/assets/js/primary-navigation.js
  2. 15 0
      varia/js/primary-navigation.js

+ 13 - 0
seedlet/assets/js/primary-navigation.js

@@ -28,6 +28,19 @@
 			};
 		}
 
+		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' );
+				wrapper.classList.remove( 'lock-scrolling' );
+				// Wait 550 and scroll to the anchor.
+				setTimeout(function () {
+					var anchor = document.getElementById(event.target.hash.slice(1));
+					anchor.scrollIntoView();
+				}, 550);
+			}
+		} );
+
 		/**
 		 * Trap keyboard navigation in the menu modal.
 		 * Adapted from TwentyTwenty

+ 15 - 0
varia/js/primary-navigation.js

@@ -27,6 +27,21 @@
 				toggleButton.focus();
 			}
 		}
+
+		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( 'lock-scrolling' );
+				if (toggleInput) {
+					toggleInput.checked = false;
+				}
+				// Wait 550 and scroll to the anchor.
+				setTimeout(function () {
+					var anchor = document.getElementById(event.target.hash.slice(1));
+					anchor.scrollIntoView();
+				}, 550);
+			}
+		} );
 	}
 
 	window.addEventListener( 'load', function() {