CODEWITHSUNDEEP
javascriptjqueryhtml
Belial
Belial

Reputation: 668

JQuery not working when I want to make smooth scroll to the sections

I want to have smooth scroll to the section on the page after clicking on the link. I found how to make it, but it's not working for me and I can't understand why.

Here my html code with links and sections:

    <header class="d-flex main-header">
        <div class="container-fluid header-container">
                <nav class="navbar navbar-toggleable-sm navbar-inverse main-navigation">
                    <h1 class="mr-auto"><a href="index.html"><img src="images/site_logo.png" alt="logo"></a></h1>
                        <button class="navbar-toggler navbar-toggler-right menu-button" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                    <div class="collapse navbar-collapse" id="navbarCollapse">
                        <ul class="navbar-nav ml-md-auto">
                            <li class="nav-item">
                                <a class="nav-link" href="#about">About</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#portfolio">Portfolio</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#team">Team</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#contact">Contact</a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
    </header>

<!--Sections-->

<section class="d-flex about" id="about">
  <!--Content-->
</section>


<section class="d-flex portfolio" id="portfolio">
  <!--Content-->
</section>

<section class="d-flex team" id="team">
  <!--Content-->
</section>

<section class="d-flex contact" id="contact">
  <!--Content-->
</section>

Here how I connecting jquery before </body> :

<script
        src="https://code.jquery.com/jquery-3.2.1.js"
        integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
        crossorigin="anonymous"></script>

Here how I connecting my script in <head></head>:

<script src="js/script.js"></script>

And here code of the script.js:

$(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 500);
});

Upvotes: 2

Views: 519

Answers (1)

vronjec
vronjec

Reputation: 259

To quote what you are saying:

  1. "Here how I connecting jquery before </body>"
  2. "Here how I connecting my script in <head></head>"

So the problem here is that script.js in the <head> relies on jQuery, yet jQuery is only included at the end of <body>.

You should change your code so that jQuery is included before script.js:

    ...
    <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
    <script src="js/script.js"></script>
</body>

Upvotes: 1

Related Questions