Search code examples
javascriptjqueryhtmlcssjquery-scrollify

How to setup jQuery Scrollify on my site?

I just can't get jQuery Scrollify get to work on my site, I want to smoothly scroll from my homepage to a div thats right under my homepage, this is my code: 

<!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",
                });
            });

and then this is my javascript because i want to scroll to the about page.

Solution

  • You need at least two elements to scroll. You are binding elements with about class, but they are nested.

    I suggest you to separate your page with <section> tags, like this:

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

    And then, scrollify call would be like this:

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

    Hope that would help.