Question

我有几个部分的着陆页。

这是代码

    <!-- 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

我怎么能做到这一点？

非常感谢你的帮助！

Answer 1

有几种方法可以实现您想要看到的内容，但是由于您没有提及任何首选项，您可以采取一些预建js或iquery项目，例如fullPage.js（opensource， guidance）或Scrollify（opensource）。

如果这对你来说不可能，请查看here上的tuturial。

我没有测试过这个，这就是为什么我会评论，但我不能（对不起）。我希望这会对你有所帮助。

Answer 2

fullPage.js有垂直和水平滑动，这正是网站链接的内容。

此外，它还提供了一种方法，可以像链接一样在一个部分中使用滚动条。检查this example。

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

在着陆页上滚动（ASP.NET MVC）

2 个答案: