时间戳

首页 > 解决方案 > 滚动时如何更改路线？

javascript - 滚动时如何更改路线？

问题描述

我正在使用 fullpage.js 制作我的作品集，并且我想在每次滚动到下一个元素时添加一条路线。例如：当我打开页面时，我得到了<Home />该部分中的元素，我想在滚动到第二个元素时放置路由器 /#home <About /> ，然后放置路由器 /#about，等等，当我这样做时？

const Fullpagescroll = () =>{
    return (
        <>
        <Header />
        <ReactFullpage
            scrollingSpeed = {1150}
            navigation
            render={() => {
                return (
                <>
                    <div className='section'>
                        <Home />
                    </div>
                    <div className='section'>
                        <About />
                    </div>
                    <div className='section'>
                        <Project />
                    </div>
                    <div className='section'>
                        <Contact />
                    </div>
                </>
                );
            }}
        />
        </>
    );
}

例子

                     <Router>
                        <div className='section' >
                            <Route path='/#home'>
                                <Home />
                            </Route>
                        </div>
                        <div className='section'>
                            <Route path='/#about'>
                                <About />
                            </Route>
                        </div>
                        <div className='section'>
                            <Route path='/#project'>
                                <Project />
                            </Route>
                        </div>
                        <div className='section'>
                            <Route path='/#contact'>
                                <Contact />
                            </Route>
                        </div>
                    </Router>

标签： javascriptreactjsfullpage.js

解决方案

只需使用fullpage.js 文档anchors中详述的选项：

锚点：（默认）定义要在每个部分的 URL 上显示[]的锚点链接 ( )。#example锚值应该是唯一的。阵列中锚点的位置将定义锚点应用于哪些部分。（第二部分的第二个位置，依此类推）。也可以通过浏览器使用锚点向前和向后导航。此选项还允许用户为特定部分或幻灯片添加书签。当心！锚点不能与站点上的任何 ID 元素（或 IE 的 NAME 元素）具有相同的值。现在可以使用属性 data-anchor 直接在 HTML 结构中定义锚点，如此处所述。

或者，您也可以data-anchor在每个部分上使用该属性。

您可以在大多数在线示例（例如此示例）以及github 存储库中提供的示例中看到此类示例。

推荐阅读