React jumps to the specified location on the page

When I reacted one of the templates in the getmdl website, when I encountered the <a> tag href="#xxx", it would cause a single-page front-end routing jump problem.

Click the red button in the picture above, the normal requirement is to jump to the location of the a tag <a name="screens"></a>.

<div className="android-be-together-section mdl-typography--text-center">
          <div className="logo-font android-slogan">be together. not the same.</div>
          <div className="logo-font android-sub-slogan">welcome to android... be yourself. do your thing. see what's going on.</div>
          <div className="logo-font android-create-character">
            <a href=""><img src="images/andy.png" /> create your android character</a>
          </div>

          // 红色按钮
          <a href="#screens">
            <button className="android-fab mdl-button mdl-button--colored mdl-js-button mdl-button--fab mdl-js-ripple-effect">
              <i className="material-icons">expand_more</i>
            </button>
          </a>
        </div>
        <div className="mdl-grid" style={{height: 800}}>
          //需要跳转到的锚点
          <a name="screens"></a>
          跳到这里
          <br />
          跳到这里
          <br />
          跳到这里
          <br />
          跳到这里
          <br />
          跳到这里
          <br />
          跳到这里
          <br />
          跳到这里
          <br />
        </div>

Another use of this requirement is the implementation of back to top. After searching on google for a long time, the solution I finally used was found on the github issue page of react-router.

// solugebefola提出的
scrollToAnchor: function () {
    let anchorName = this.props.location.hash;
    if (anchorName) {
        anchorName = anchorName.replace("#","");
        let anchorElement = document.getElementById(anchorName);
        if(anchorElement) { anchorElement.scrollIntoView(); }
    }
}

I made a modification to the above method, which roughly looks like this:

scrollToAnchor = (anchorName) => {
    if (anchorName) {
        let anchorElement = document.getElementById(anchorName);
        if(anchorElement) { anchorElement.scrollIntoView(); }
    }
  }

The main implementation method is to use the scrollIntoView of the html element. So the first step is to use getElementById to find an anchor, and then if the element exists, call its scrollIntoView method.

Alright, now let's modify the code in the first part.

class HomeView extends Component {

  scrollToAnchor = (anchorName) => {
    if (anchorName) {
        let anchorElement = document.getElementById(anchorName);
        if(anchorElement) { anchorElement.scrollIntoView(); }
    }
  }

  render() {

    return (
      <div>
        <div className="android-be-together-section mdl-typography--text-center">
          <div className="logo-font android-slogan">be together. not the same.</div>
          <div className="logo-font android-sub-slogan">welcome to android... be yourself. do your thing. see what's going on.</div>
          <div className="logo-font android-create-character">
            <a href=""><img src="images/andy.png" /> create your android character</a>
          </div>

          <a onClick={()=>this.scrollToAnchor('screens')}>
            <button className="android-fab mdl-button mdl-button--colored mdl-js-button mdl-button--fab mdl-js-ripple-effect">
              <i className="material-icons">expand_more</i>
            </button>
          </a>
        </div>
        <div className="mdl-grid" style={{height: 800}}>
          <a id="screens"></a>
          跳到这里
          <br />
          跳到这里
          <br />
          跳到这里
          <br />
          跳到这里
          <br />
          跳到这里
          <br />
          跳到这里
          <br />
          跳到这里
          <br />
        </div>
      </div>
    );
  }


}

export default HomeView;

With the modified code above, we only need to focus on two a tags and an arrow function.

We made two modifications:

1. Change the anchor point from the traditional name attribute to the id attribute. In this way, we can use the document.getElementById method to conveniently query the anchor point.

2. Remove the href attribute of the original red button, and then add an onClick method. The onClick method passes in the id of an anchor, and then uses the following function to find the anchor and jump to it.

scrollToAnchor = (anchorName) => {
    if (anchorName) {
        // 找到锚点
        let anchorElement = document.getElementById(anchorName);
        // 如果对应id的锚点存在，就跳转到锚点
        if(anchorElement) { anchorElement.scrollIntoView(); }
    }
  }

In this way, when I click the red button, I jump to the anchor point (<div className="mdl-grid" style={{height: 800}}> the page element corresponding to this div tag is at the top of the browser) .