如何在不使用任何锚点的情况下平滑滚动到页面的每个组件答案

【问题标题】：How to smooth scroll to each component of my page without using any anchor如何在不使用任何锚点的情况下平滑滚动到页面的每个组件
【发布时间】：2021-05-24 09:47:19
【问题描述】：

我想在我的 html 页面上实现平滑滚动行为，该页面是由 react 组件构建的。每个组件的高度为 100vh。我看过许多平滑滚动教程和博客，其中涉及借助导航栏标签或一些锚标签进行平滑滚动。我不想使用任何类型的锚标签。我的问题是如何使用滚动条在页面组件之间平滑滚动。即如果有人向下滚动，页面必须平滑滚动到下一个组件，而不是挂在组件之间等等。

这些是我的组件

render() {

    console.log(this.props);
    if(this.props.HomeHeroSec)
    {
        return (
          <div className={classes.containerclass}>
          
                    
            <HomeSec1 className={classes.section} herodata={this.props.HomeHeroSec} />
                   
            <HomeSec3 className={classes.section} cradata={this.props.HomeCrausal} />

            <AboutSec6 className={classes.section}/>
           
            <HomeSec4 className={classes.section} secData={this.props.HomeHeroSec} />
           
            <Footer />
                    
          </div>
        )
    }

【问题讨论】：

标签： javascript css reactjs smooth-scrolling

【解决方案1】：

react-scroll 包可以帮助你平滑滚动。 https://www.npmjs.com/package/react-scroll

【讨论】：