两个功能：1.点击锚点，跳转到指定位置，2.滚动

该组件两个功能：1.点击锚点，滚动到指定位置，2.滚动页面，获取可视区域对应的锚点

安装

$ npm install react-anchor-scroll-detect --save

例子

$ git clone https://github.com/superwyk/react-anchor-scroll-detect.git $ cd react-anchor-scroll-detect $ npm i $ npm run start

使用

import AnchorDetect from 'react-anchor-scroll-detect' ... <div> <AnchorDetect className="anchor" items={['section1', 'section2', 'section3', 'section4', 'section5', 'section6']} activeClass="active" offsetTop={20}> <li>section1</li> <li>section2</li> <li>section3</li> <li>section4</li> <li>section5</li> <li>section6</li> </AnchorDetect> <section id="section1" style={{marginTop: '21px'}}> ... </section> <section id="section2"> ... </section> <section id="section3"> ... </section> <section id="section4"> ... </section> <section id="section5"> ... </section> <section id="section6"> ... </section> </div>

属性props

锚点(anchor)目标元素id集合

处在可视区域中的锚点目标元素对应的锚点的类名(class)

距离top的偏移量

锚点元素的父元素的标签名

可滚动区域容器，默认为window

锚点元素的父元素的class

锚点元素的父元素的style

github

https://github.com/superwyk/react-anchor-scroll-detect

License

MIT