简单实现锚点定位

 

import React, { Component } from 'react';

export default class Main extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  componentDidMount() {}

  jumpHandler = (index) => {
    let scrollItems = document.querySelectorAll('.scroll-item')
    let totalY = scrollItems[index].offsetTop // 锚点元素距离其offsetParent(这里是body)顶部的距离(待滚动的距离)
    let distance = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset // 滚动条距离滚动区域顶部的距离(滚动区域为窗口)
    // 滚动动画实现, 使用setTimeout的递归实现平滑滚动，将距离细分为50小段，10ms滚动一次
    // 计算每一小段的距离
    let step = totalY / 50
    if (totalY > distance) {
      smoothDown()
    } else {
      let newTotal = distance - totalY
      step = newTotal / 50
      smoothUp()
    }
    // 参数element为滚动区域
    function smoothDown() {
      if (distance < totalY) {
        distance += step
        window.scrollTo(0,distance);
        setTimeout(smoothDown.bind(this), 10)
      } else {
        window.scrollTo(0,totalY);
      }
    }

    // 参数element为滚动区域
    function smoothUp() {
      if (distance > totalY) {
        distance -= step
        window.scrollTo(0,distance);
        setTimeout(smoothUp.bind(this), 10)
      } else {
        window.scrollTo(0,totalY);
      }
    }
  }

  render() {
    return (
      <div style={{background: '#fff'}}>
        <div style={{textAlign: 'center'}}>
          <a onClick={() => {this.jumpHandler(0)}} style={{margin: '1rem 1rem 1rem 1rem', fontSize: '20px', fontWeight: 'bolder'}}>111</a>
          <a onClick={() => {this.jumpHandler(1)}} style={{margin: '1rem 1rem 1rem 1rem', fontSize: '20px', fontWeight: 'bolder'}}>222</a>
          <a onClick={() => {this.jumpHandler(2)}} style={{margin: '1rem 1rem 1rem 1rem', fontSize: '20px', fontWeight: 'bolder'}}>333</a>
        </div>
        <br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br />
        <div className="scroll-content">
          <div className="scroll-item">
            1111111
            <br />
            1111111
            <br />
            1111111
            <br />
            1111111
            <br />
            1111111
            <br />
            1111111
            <br />
            1111111
            <br />
            1111111
            <br />
            1111111
            <br />
            1111111
            <br />
            1111111
            <br />
            1111111
            <br />
            1111111
            <br />
            1111111
            <br />
            1111111
            <br />
          </div>
          <div className="scroll-item">
            2222222
            <br />
            2222222
            <br />
            2222222
            <br />
            2222222
            <br />
            2222222
            <br />
            2222222
            <br />
            2222222
            <br />
            2222222
            <br />
            2222222
            <br />
            2222222
            <br />
            2222222
            <br />
            2222222
            <br />
          </div>
          <div className="scroll-item">
            333333
            <br />
            333333
            <br />
            333333
            <br />
            333333
            <br />
            333333
            <br />
            333333
            <br />
            333333
            <br />
            333333
            <br />
            333333
            <br />
            333333
            <br />
            333333
            <br />
            333333
            <br />
          </div>
        </div>
      </div>
    );
  }
}