如何在我的网站上设置 jQuery Scrollify？

Question

我无法让 jQuery Scrollify 开始在我的网站上工作，我想从我的主页顺利滚动到 div 就在我的主页下面，这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous">
    </script>
    <script src="scriptfile.js" type="text/javascript" ></script>
    <script src="jquery.scrollify.js"></script>

  </head>
  <body>

    </div>

    <div class="banner">
        <h1></h1>
        <p class="tagline" style="font-weight: 100">I build products for the web.</p>
        <a class="banner_btn" href="#"><p>Portfolio</p></a>
        <a  href="#about">
        <img class="arrow" src="arrow.png" alt="Arrow Down"></a>
        <p class="arrowtext">Click to scroll</p>
    </div>
</div>

    <section class="about" id="about">
    <div id="about" href="about" class="about">
        <div class="abouttext">
            <h1>About</h1>
        </div>
        <div class="img">
                <div class="contact">
                    <p></p>  
                    <p></p>   
                    <p class="email"></p>
                </div>
        </div>
    </div>
    </section>
</body>

    $(function() {
            $.scrollify({
                    section : ".about",
                });
            });

然后这是我的 javascript 因为我想滚动到关于页面。

Answer 1

您至少需要两个元素才能滚动。您正在使用 about class 绑定元素，但它们是嵌套的。

我建议您使用 <section> 标记分隔您的页面，如下所示：

<section class="banner">...</section>
<section class="about">...</section>

然后，scrollify 调用将是这样的：

$(function() {
    $.scrollify({
        section : "section"
    });
});

希望对您有所帮助。

如何在我的网站上设置 jQuery Scrollify？

How to setup jQuery Scrollify on my site?

html

javascript

css

jquery

jquery-scrollify