场景

react页面中，不确定有多少个需要定位的块，根据元素块的个数，生成对应数量的锚点，点击锚点后页面滚动到指定的块。 页面滚动到指定的块，对应的锚点高亮。

github地址：https://github.com/fyxwanan/author-demo

锚点

超链接的一种形式，快速定位到想要看的位置，常用在文章目录等位置。

实现

• dom元素方面

// dom
<div
    id="know-detail-body"
    onScrollCapture={() => this.onScrollEvent()}
    style={{ height: '200px', overflowY: 'scroll' }}
    ref={(c) => {
      this.scrollRef = c;
    }}
>
  <div className="content">
        <div id="content-div">
          {contentOptions}
        </div>
    </div>

    <div className="anchor-link-body" id="know-link-anchor">
        <div className="link-content-link">
            <span />
        </div>
        <div id="link-contentKey">
          {LinkOptions}
        </div>
    </div>
</div>

• 构造对象，动态生成元素，对象从接口获取，数目不定，这是个demo

/*
  ObjectList:[ 
  {id: 1, name: '橘子'}，
  {id: 2, name: '苹果'},
  {id: 3, name: '香蕉'}，
  {id: 4, name: '菠萝'}，
]
*/
// 根据数组生成对应的模块, 在render函数内面
const contentOptions = [];
const LinkOptions = [];
ObjectList.forEach((item) => {
  LinkOptions.push(<div id={`link-${item.id}`} className="link-content" onClick={this.scrollToAnchor.bind(this, item.id)}>{item.name}</div>)
  contentOptions .push(
    <div className="content-child">
     <span id={`${item.id}`}>{item.name}</span>
     <div style={{ width: '100%', heigth: '500px' }}>
        我是内容，我是内容
     </div>
   </div>
  )
});

• 点击锚点，对于的块滑动到浏览器窗口的顶部方法

// 这是滚动方法
scrollToAnchor = (anchorName) => {
    if (anchorName || anchorName === 0) {
      // 找到锚点
      const anchorElement = document.getElementById(anchorName);
      // 如果对应id的锚点存在，就跳转到锚点
      if (anchorElement) {
        anchorElement.scrollIntoView({
          block: 'start',
          behavior: 'smooth',
        });
      }
    }
  };

• 生命周期函数中获取所有元素的id集合

  componentDidMount() {
    this.getBoxIds();
  }

/**
   *  1. 在React生命周期函数中执行函数
   *  2. 获取每个块的正文内容初始距离浏览器边框的距离 offsetTop
   */
  getBoxIds = () => {
        // 正文板块绑定的id数组
        const linkIds = [];
        ObjectList.forEach((item, index) => {
            const top = document.getElementById(`${item.id}`);
            if (top) {
                linkIds.push({ key: item.id, offsetTop: top.getBoundingClientRect().top});
            }
        })
        this.setState({ linkIds });
    };

• 监听页面滚动，操作dom，使导航的锚点高亮

/**
 *  activeLink   -- 高亮的类名，属性在css中自行设置
 *  linkIds    --  锚点对应div id集合的数组
 *  this.scrollRef.scrollTop  滚动条滚动的距离
*/
  onScrollEvent() {
    const { linkIds } = this.state;
    linkIds.forEach((item, index) => {
      if (this.scrollRef.scrollTop > item.offsetTop) {
        document.getElementById(`link-${item.key}`).classList.add('activeLink');
        linkIds.forEach((k, v) => {
          if (item.key !== k.key) {
            document.getElementById(`link-${k.key}`).classList.remove('activeLink');
          }
        });
      }
    });
  }

链接: https://fly63.com/article/detial/5778