fix(aio): support multibyte character in heading (#21414)

PR Close #21414

aio/src/app/shared/scroll.service.spec.ts

@@ -136,6 +136,17 @@ describe('ScrollService', () => {
       expect(element.scrollIntoView).toHaveBeenCalled();
       expect(window.scrollBy).toHaveBeenCalled();
     });
+
+    it('should scroll to the element whose id matches the hash with encoded characters', () => {
+      const element = new MockElement();
+      location.hash = '%F0%9F%91%8D'; // 👍
+      document.getElementById.and.returnValue(element);
+
+      scrollService.scroll();
+      expect(document.getElementById).toHaveBeenCalledWith('👍');
+      expect(element.scrollIntoView).toHaveBeenCalled();
+      expect(window.scrollBy).toHaveBeenCalled();
+    });
   });
 
   describe('#scrollToElement', () => {

aio/src/app/shared/scroll.service.ts

@@ -83,6 +83,6 @@ export class ScrollService {
    * Return the hash fragment from the `PlatformLocation`, minus the leading `#`.
    */
   private getCurrentHash() {
-    return this.location.hash.replace(/^#/, '');
+    return decodeURIComponent(this.location.hash.replace(/^#/, ''));
   }
 }