Added DocWrapper and Link component to address link issues

components/Accordion.jsx

@@ -24,12 +24,12 @@ const Accordion = ({ children, title = "More" }) => {
       if (!detailsElement.open) {
         // 3. Then open it
         detailsElement.open = true;
+      }
       // 4. and scroll into view and focus
       targetElement.focus();
       targetElement.scrollIntoView({ behavior: "smooth", block: "center" });
     }
   }
-  }
 
   useEffect(() => {
     // 1. Add event listener for future hash changes

components/DocWrapper.jsx

@@ -0,0 +1,24 @@
+import React from "react"
+import { useEffect } from "react"
+
+const DocWrapper = ({children})=>{
+
+   useEffect(()=>{
+    let hash = location.hash.substring(1);
+    // Remove scroll restoration when there is a hash of length > 0.
+    if (hash.length!==0 && "scrollRestoration" in history) {
+      history.scrollRestoration = "manual"
+    }
+    // Check if the hash type is a Docusauraus link or a reference link within document.
+    let isDocusaurusLink = (hash.substring(0,4) !== "link")
+    let targetElement;
+    targetElement = document.getElementById(hash)
+    if(!targetElement)return
+    if(isDocusaurusLink)
+    targetElement.scrollIntoView(true)
+   },[])
+
+   return <>{children}</>
+}
+
+export default DocWrapper

components/Link.jsx

@@ -0,0 +1,14 @@
+import React from "react"
+
+const Link = ({hash,title}) =>{
+
+    const handleLink=(event)=>{
+        //manually change hash to trigger hashChange event.
+        window.location.hash  = "#";
+        window.location.hash = hash;
+      }
+      
+    return <a onClick={handleLink} className="navlink">{title}</a>
+}
+
+export default Link

docs/create-modify-element.mdx

@@ -7,7 +7,11 @@ slug: /
 
 import Admonition from "../components/Admonition"
 import Accordion from "../components/Accordion"
+import Link from "../components/Link"
 import MDN from "../components/MDNBadge"
+import DocWrapper from "../components/DocWrapper"
+
+<DocWrapper>
 
 :::note DOM interfaces
 Every kind of **DOM** node is represented by an interface based on **Node** interface.   
@@ -29,7 +33,7 @@ document.querySelector(".not-found"); // null
 ```
 
 <Accordion>
-  <Admonition type="note" title="Also available on Element and fragment" id="element-has-qs">
+  <Admonition type="note" title="Also available on Element and fragment" id="link-element-has-qs">
   Besides <b>Document</b>, this method is also available on <b>Element</b> and <b>DocumentFragment</b>.<br/>
   If you want to look within a specific element, just use <code>ele.querySelector()</code> on the parent element.<br/>
   If you want to look within a specific fragment, just use <code>df.querySelector()</code> on the parent fragment.
@@ -65,7 +69,7 @@ for (let p of paras) {
 }
 ```
 
-`querySelectorAll` is also available on <b>Element</b> and <b>DocumentFragment</b>, in the [same way as querySelector](#element-has-qs).
+`querySelectorAll` is also available on <b>Element</b> and <b>DocumentFragment</b>, in the <Link title = "same way as querySelector" hash = "link-element-has-qs"/>.
 
 <MDN title="querySelectorAll" url="https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll" />
 
@@ -137,7 +141,7 @@ eleDiv.appendChild(eleH1)
   then it is removed from its existing parent and then added to the new parent.
   </Admonition>
 
-  <Admonition type="note" title="If it is DocumentFragment" id="appendChild-documentFragment">
+  <Admonition type="note" title="If it is DocumentFragment" id="link-appendChild-documentFragment">
   If newNode is a DocumentFragment, then - instead of adding the fragment itself as a child, 
   the entire content of the fragment is added as children of the parent node.
   </Admonition>
@@ -222,7 +226,7 @@ This method is used to create a new empty document fragment.
 DocumentFragment can be considered to be a off-screen lightweight `document` object. 
 It is generally used for batching multiple operations - by doing them in the fragment over time and then rendering the whole content to the visible DOM in one shot .
 
-Because fragment is not rendered, making changes to it doesn't cause any performance impact (no reflow). To **actually "render" the fragment** in the visible document, [use appendChild](#appendChild-documentFragment) or `insertBefore`.
+Because fragment is not rendered, making changes to it doesn't cause any performance impact (no reflow). To **actually "render" the fragment** in the visible document, <Link title = "use appendChild" hash = "link-appendChild-documentFragment"/> or `insertBefore`.
 
 ```js
 let fragment = document.createDocumentFragment()
@@ -244,3 +248,5 @@ outerEle.appendChild(fragment)
 --------
 
 In the next section, we'll see how to read information from a DOM element.
+
+</DocWrapper>

src/css/custom.css

@@ -34,6 +34,14 @@
   text-transform: unset;
 }
 
+.navlink{
+  cursor: pointer;
+}
+
+.navlink:hover{
+text-decoration: underline;
+}
+
 summary {
   cursor: pointer;
 }