在登录页面上滚动 (ASP.NET MVC)

Posted 2023-03-06

【中文标题】在登录页面上滚动 (ASP.NET MVC)

【英文标题】：Scrolling on landing page (ASP.NET MVC)

【发布时间】：2017-09-21 00:48:35

【问题描述】：

我有几个部分的登录页面。

这里是代码

    <!-- About Section -->
    <section id="about" class="about-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h1>About Section</h1>
                </div>
            </div>
        </div>
    </section>

    <!-- Services Section -->
    <section id="services" class="services-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h1>Services Section</h1>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="contact-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h1>Contact Section</h1>
                </div>
            </div>
        </div>
    </section>`

我需要像在这个网站上那样向下滚动。

Website

我怎样才能做到这一点？

非常感谢您的帮助！

【问题讨论】：

startbootstrap.com/template-categories/one-page

请搜索任何可用的引导单页应用程序主题。尝试在您的项目中实施，如果您在实施中发现任何问题，请告诉我们。

【参考方案1】：

有几种方法可以实现您想要看到的内容，但由于您没有提及任何偏好，您可以使用一些预构建 JS 或 jQuery 项目，例如 fullPage.js（它是 opensource、guidance）或 @ 987654324@（也有opensource）。

如果您无法做到这一点，请查看here 上的教程。

我没有对此进行测试，这就是为什么我会对此发表评论但我不能（对此感到抱歉）。

【讨论】：

没问题，很高兴我能帮上忙 :)

【参考方案2】：

fullPage.js有垂直和水平滑动，这正是链接的站点所具有的。

此外，它还提供了一种在一个部分中具有滚动条的方法，就像在您的链接中一样。检查this example。

如果您还想要网站为水平幻灯片提供的鼠标拖放功能，那么 fullPage.js 还提供了Drag And Move extension。