【react】单页面锚点

最新推荐文章于 2024-06-12 09:55:46 发布

sakoooo

最新推荐文章于 2024-06-12 09:55:46 发布

阅读量571

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_33539213/article/details/103509935

版权

前端专栏收录该内容

38 篇文章 0 订阅

订阅专栏

场景： 选择时页面滚动到对应到div。


  scrollToAnchor = anchorName => {
    if (anchorName) {
      const anchorElement = document.getElementById(anchorName);
      if (anchorElement) {
        try {
          // chrome 61开始才兼容scrollIntoView(scrollIntoViewOption:object)的写法
          anchorElement.scrollIntoView({ behavior: "smooth", block: "start" });
        } catch (e) {
          // 低版本chrome(<61)
          anchorElement.scrollIntoView();
        }
      }
    }
  };

  handleChange = value => {
    this.scrollToAnchor(value);
  };

	<Select defaultValue="111" style={{ width: 120 }} onChange={this.handleChange}>
		<Option value="111">111</Option>
		<Option value="222">222</Option>
	</Select>

	 <div style={{ height: 500 }} id="111">1111的内容</div>
     <div style={{ height: 500 }} id="222">222的内容 </div>