无法在移动设备上正确实现平滑滚动反应

Question

嗨，我正在使用React和Next.js建立一个网站，并且正在使用react-scroll中的Link（使用react-boot中的Nav.Link来创建响应式导航栏），然后单击指向每个部分的链接，它就可以正常工作当它位于计算机屏幕上时，它是完美的，但是当它位于手机/平板电脑上时，它不会滚动到正确的位置。

这是我的NavBar代码：

            <Navbar className="navbar" fixed="top" sticky="top" collapseOnSelect expand="lg" bg="light" variant="light">
                <Navbar.Brand href="#">
                        <a
                            onClick={this.scrollToTop}>
                                veronika
                        </a>
                </Navbar.Brand>
                <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                <Navbar.Collapse id="responsive-navbar-nav">
                    <Nav className="navbar-nav ml-auto align-items-center">
                        <Nav.Link
                        eventKey="1" 
                        as={Link} 
                        className="nav-item"   
                        activeClass="active"
                        to="section1"
                        spy={true}
                        smooth={true}
                        duration= {500}> 
                            About
                        </Nav.Link>

                            <Nav.Link
                            eventKey="1" 
                            as={Link} 
                            className="nav-item"   
                            activeClass="active"
                            to="section2"
                            spy={true}
                            smooth={true}
                            duration= {500}
                            href="#section2">
                                Experience
                            </Nav.Link>


                        <Nav.Link  
                        eventKey="1" 
                        as={Link}   
                        className="nav-item" 
                        activeClass="active"
                        to="section3"
                        spy={true}
                        smooth={true}
                        duration= {500}
                        href="#section3">
                                Contact
                        </Nav.Link>

                    </Nav>
                </Navbar.Collapse>

                <style jsx global>{`



                .navbar{
                    background-color:white;
                    text-align: center;
                    position: sticky;
                    position: -webkit-sticky;
                    top:0;
                    z-index:1;
                    float:left;
                    box-shadow: 0 4px 2px -2px rgba(0,0,0,.2);
                }

                .nav-item{
                    list-style: none;
                    float: right;
                    color: black;
                    text-align: right;
                    padding: 14px 16px;
                    text-decoration: none;
                    font-size: 17px;
                }

                a:hover{
                    color:purple;
                }

                .nav-item:hover{
                    color: purple !important;
                    display: block !important;
                    text-decoration: none;
                }
                `}</style>
            </Navbar>  

和我的代码段（目前每个代码都相同）：

            <div className="section1">
                <style jsx>{`
                    height:100vh;
                    background-position: center;
                    background-size: cover;
                    display: flex;
                    flex-flow: column;
                    justify-content: center;
                    align-items: center;
                    background-color: yellow;
                `}</style>
            </div>

我想知道是否可以根据屏幕尺寸更改链接组件的偏移量，但是我不确定如何做到这一点。