时间戳

首页 > 解决方案 > 如何从Angular中的另一个组件滚动到一个组件？

javascript - 如何从Angular中的另一个组件滚动到一个组件？

问题描述

我已经花了几个小时，甚至几天试图完成这项工作，但我找不到解决方案，我已经尝试了所有方法，但没有找到像我这样的案例。

我正在尝试从导航栏滚动到我的单页网站中的另一个组件，这是另一个组件。我这样设置的主要应用程序组件：

<body>
    <app-navbar></app-navbar>
    <app-page-one id="page-one"></app-page-one>
    <app-page-two id="page-two"></app-page-two>
    <app-page-three id="page-three"></app-page-three>
    <app-footer></app-footer>
</body>

如您所见，我在每个组件上都添加了一个 ID，以便在尝试滚动时可以识别它。

我想单击导航栏中的第三页按钮，使其向下滚动到第三页组件。我的导航栏组件如下所示：

<body class="body">
    <header class="header">
        <a href="#" class="logo">LOGO</a>
        <div class="menu-toggle">
            <fa-icon [icon]="faBars" transform="grow-20"></fa-icon>
        </div>
        
        <nav class="nav">
            <ul>
                
                <li>
                    <a href="#">Page One</a>
                </li>
                <li>
                    <a href="#">Page Two</a>
                </li>
                <li >
                    <a href="#">Page Three</a>
                </li>
                
            </ul>
        </nav>
    </header>
</body>

我试过使用 Ngx Page Scroll 和所有东西，但似乎无法让它工作。我不确定我是否需要使用输入输出来让他们交流或类似的东西，任何东西都会有所帮助，谢谢。

标签： javascripthtmlcssangular

解决方案

每个 href 都需要引用您希望 ngx-page-scroll 将视口移动到的 element.id。所以身体应该是这样的。

<li>
    <a href="#page-one">Page One</a>
</li>
<li>
    <a href="#page-two">Page Two</a>
</li>
<li >
     <a href="#page-three">Page Three</a>
</li>

如果您参考 npm 页面并查看 url，https://www.npmjs.com/package/ngx-page-scroll#usage。您可以看到文档的“使用”部分 ( id="usage" )有一个链接和一个元素引用 ( #usage ) 。

推荐阅读