Jquery滚动到固定位置

1.场景：外部按钮控制容器滚动条，滚动到指定id的块级元素

2.逻辑：

3.源码

/**
 * @Name:
 * @Author:
 * @Desc:  关于滚动条的一些事件
 * @Date: 2020-12-04 09:25:34
 */
import React, { Component } from "react";
import { Title } from "@/component";
import $ from "jquery";
import styles from "./styles.module.less";
const list = [
  { height: 220, id: "aa", name: "aa" },
  { height: 120, id: "bb", name: "bb" },
  { height: 420, id: "cc", name: "cc" },
  { height: 270, id: "dd", name: "dd" }
];
class Scroll extends Component {
  state = {
    scrollId: list[0].id
  };
  
  /**
   * @name scrollChange
   * @param {String} id 指定位置ID
   * @description 滚动到指定位置
   */
  scrollChange = (id) => {
    //外层离浏览器窗口顶部高
    let parTop = $("#list").offset().top;
    //目标离浏览器窗口顶部高
    let childTop = $(`#${id}`).offset().top;
    //滑动条滚动距离
    let scroll = $("#list").scrollTop();
    console.log("滚动到指定位置====", parTop, childTop, scroll);
    let top = childTop - parTop + scroll;
    $("#list").animate({ scrollTop: top - 2 });
    this.setState({ scrollId: id });
  };
  render() {
    const { scrollId } = this.state;
    return (
      <div className={styles.container}>
        <div className={styles.block}>
          <Title text="关于滚动条的一些事件" />
        </div>
        <div style={{ padding: "10px" }}>
          {list.map((v) => (
            <div className={v.id === scrollId ? styles.li_btn_active : styles.li_btn} onClick={() => this.scrollChange(v.id)}>
              {v.name}
            </div>
          ))}
        </div>
        <ul className={styles.ul} id="list">
          {list.map((v) => (
            <li className={styles.li} style={{ height: v.height }} id={v.id}>
              <h1>{v.name}</h1>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}
export default Scroll;