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

时间:2017-10-18 12:27:10

标签: javascript jquery html css jquery-scrollify

我无法让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,因为我想滚动到about页面。

1 个答案:

答案 0 :(得分:0)

您需要至少两个元素才能滚动。 您是about类的绑定元素,但它们是嵌套的。

我建议您将页面与<section>标记分开,如下所示:

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

然后,scrollify调用将是这样的:

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

希望这会有所帮助。