The web page anchor function implements the

1: The <a> tag implements the anchor point

   <a>Tags are elements in HTML used to create hyperlinks, often used to jump to other pages or to a certain location on the current page.

        Using anchors in the <a> tag allows users to jump to a specific location on the page after clicking the link, instead of jumping to the top of the entire page. Anchors are defined using the # notation plus the corresponding element ID, specified in the attribute of the <a> tag. For example, to create an anchor link to the element with ID , you would write: hrefmysection

<a href="#mysection">Jump to my section</a>

        You can add an ID to any element, making it a target that can be anchored. For example, to add an anchor point to a paragraph, you would write:

<p id="mysection">This is my section</p>

        When a user clicks on a link with an anchor, the page scrolls to the location of the target element and places the element at the top or bottom of the viewport, depending on the browser, operating system, and user preferences.

2: The <a> tag anchor will change the url of the page        

When an anchor link similar to <a href="#mysection">link</a> appears on the page, clicking this link will jump to the page containing the ID somehash element position. During this process, the hash portion of the URL is changed.

        When this button is clicked, the hash part of the URL will change from the original value to #newhash, and the page routing will change. If your own project blocks error routing and redirects to 404 page, it will jump to the 404 page, so how to solve this problem?

Three: Solve the problem of changing the url after clicking the <a> tag anchor function        

Solution: Use scrollIntoView(true) method

        scrollIntoView(true) is a JavaScript method that can be used to scroll elements on the page to the visible area. This method scrolls the current element to the top or bottom of visible view.

        It should be noted that this method can only be used on DOM elements. When scrollIntoView(true) is called, the browser attempts to scroll the element to the top so that it is within the viewable area. If the parameter is set to false, the element will scroll to the bottom.

For example, the following code will scroll the element with the ID "example" in the page to the top:

document.getElementById("mySection").scrollIntoView(true);

        Therefore, we can obtain the label dom element (you can use any label except the <a> label), add a click event, and use scrollIntoView(true) to implement the anchor function of the a label. This method can perfectly replace < a>The anchor point of the label.

<span onclick=handleSpanClick>点击跳转到div</span>
<div id = 'mySection'></id>

const handleSpanClick = ()=> {
        document.querySelector('#mySection').scrollIntoView(true);
    };

Four: The following is an example of the scrollIntoView(true) method in a React function component

        In React function components, you can use Refs to reference a specific DOM element, and then use the scrollIntoView(true) method to scroll the element to the top of the visible view.

        The following is a sample code that uses Refs to implement the anchor function:

import React, { useRef } from "react";

function AnchorScroll({ id, children }) {
  const ref = useRef(null);

  const handleClick = () => {
    ref.current.scrollIntoView(true);
  };

  return (
    <>
      <div onClick={handleClick}>{children}</div>
      <div ref={ref} id={id} />
    </>
  );
}

export default AnchorScroll;

        In the above code, we create an AnchorScroll function component that accepts id and children as attributes. For each AnchorScroll component, we create a Refs that will be associated with the DOM element with the same id attribute value. We then include two div elements in the component's return, one to fire the click event and the other to have an id attribute associated with the Refs. When the user clicks on the div element containing the text, the handleClick function is called. The handleClick function calls the scrollIntoView(true) method on Refs to scroll to the DOM element with the corresponding id attribute.

        When using the AnchorScroll component, you only need to pass the id and child elements:

import React from "react";
import AnchorScroll from "./AnchorScroll";

function App() {
  return (
    <>
      <AnchorScroll id="section1">Section 1</AnchorScroll>
      <div>
        ...
      </div>
      <AnchorScroll id="section2">Section 2</AnchorScroll>
      <div>
        ...
      </div>
      <AnchorScroll id="section3">Section 3</AnchorScroll>
      <div>
        ...
      </div>
    </>
  );
}

export default App;

        In the above code, we use three AnchorScroll components, each component has a unique id. When the user clicks on each AnchorScroll component, the page will scroll to the DOM element with the corresponding id attribute.

---

Five: scrollIntoView implements smooth scrolling

Note: This scrolling is very stiff. If we want to achieve smooth scrolling, we can use the CSS'sscroll-behavior attribute. Set the scroll-behavior attribute to smooth to make the scrolling Smooth. The specific method is that when scrolling to a DOM element, first set the scroll-behavior attribute of the element's parent element to smooth, and then call the scrollIntoView method of the element.