Reputation: 19

SmoothScroll nav doesn't work with bootstrap 4

I have been using bootstrap 4 for a while now. Seen multiple explonations why the smoothscroll should work but I still don't see to find it!

Maybe someone could explain why it doesn't work for me? Or whats wrong with my coding?

Greats, Jason

$(document).ready(function(){
 let scroll_link = $('.scroll');

  //smooth scrolling -----------------------
  scroll_link.click(function(e){
      e.preventDefault();
      let url = $('body').find($(this).attr('href')).offset().top;
      $('html, body').animate({
        scrollTop : url
      },700);
      $(this).parent().addClass('active');
      $(this).parent().siblings().removeClass('active');
      return false;	
   });
});

.masthead {
  height: 100vh;
  min-height: 500px;
  background-image: url('https://source.unsplash.com/BtbjCFUvBXs/1920x1080');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#page-content {
  flex: 1 0 auto;
}

#sticky-footer {
  flex-shrink: none;
}

header {
  padding: 156px 0 100px;
}

section {
  padding: 150px 0;
}

<!DOCTYPE html>
<html>
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


        <!--BOOTSTRAP-->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

        <!-- COSTUM STYLE.CSS -->
        <link href="Home.css" rel="stylesheet" type="text/css"/>

        <title>Iterms Group Europe B.V.B.A</title>
    </head>
    <body>

    <body id="page-top">

        <!-- Navigation -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light shadow fixed-top">
            <div class="container">
                <a class="navbar-brand js-scroll-trigger" href="#page-top">Iterms Group</a>
                <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item">
                            <a class="nav-link js-scroll-trigger" href="#Home">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link js-scroll-trigger" href="#Voordelen">Voordelen</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link js-scroll-trigger" href="#Administratie">Administratie</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link js-scroll-trigger" href="#DebiteurenBeheer">Debiteuren Beheer</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link js-scroll-trigger" href="#Contact">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <header id="Home" class="masthead">
            <div class="container h-100">
                <div class="row h-100 align-items-center">
                    <div class="col-12 text-center">
                        <h1 style="font-weight: 800;">Administratiekantoor</h1>
                        <p style="font-weight: 600;">voor bedrijven en particulieren</p>
                        <br>
                        <br>
                        <p>Welkom Iterms Group Europe is een administratiekantoor die U als ondernemer veel werk uit handen kan nemen. Als ondernemer wilt U niets liever dan bezig zijn met uw bedrijf . Maar voor uw bedrijfsvoering heeft U een goede administratie nodig.

                            Op zelfstandige basis staan wij U ten dienste en kunnen wij U helpen met uw administratie, debiteurenbeheer, enz…

                            Ook voor tijdelijke werkzaamheden helpen wij U graag voor het wegwerken van achterstanden in uw administratie bij langdurige ziekte of zwangerschapsverlof.

                            Iterms Group Europe werkt met flexibele uren in het bedrijf van de klant of vanuit onze maatschappelijke zetel op de Fazantenstraat 122 te As.</p>
                    </div>
                </div>
            </div>
        </header>

        <section id="Voordelen" class="bg-dark">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4">
                        <a href="#">
                            <img class="img-fluid" src="http://placehold.it/400x400" alt="">
                        </a>
                    </div>
                    <div class="col-lg-8 mx-auto">
                        <h2 style="color: mintcream">Voordelen</h2>
                        <p style="color: mintcream" class="lead">Zit U met de volgende vragen en problemen zoals, ik heb nog veel werk en moet nog:</p>
                        <p style="color: mintcream">Offertes maken en versturen of mijn facturen maken.</p>
                        <p style="color: mintcream">Nakijken of de klanten al betaald hebben en een aanmaning sturen.</p>
                        <p style="color: mintcream">Moet ik met deze klant verdere stappen ondernemen?</p>
                        <p style="color: mintcream">Nakijken waarom ik een aanmaning heb ontvangen en nog betalingen doen.</p>
                        <p style="color: mintcream">Is mijn personeel op tijd betaald?</p>
                        <p style="color: mintcream">Mijn personeel is ziek, wat nu?</p>
                    </div>
                </div>
            </div>
        </section>
        <section id="Administratie" class="bg-light">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 mx-auto">
                        <h2>Administratie</h2>
                        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.</p>
                    </div>
                    <div class="col-lg-4">
                        <a href="#">
                            <img class="img-fluid" src="http://placehold.it/400x400" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </section>
        <section id="DebiteurenBeheer" class="bg-dark">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4">
                        <a href="#">
                            <img class="img-fluid" src="http://placehold.it/400x400" alt="">
                        </a>
                    </div>
                    <div class="col-lg-8 mx-auto">
                        <h2 style="color: mintcream">Debiteuren beheer</h2>
                        <p style="color: mintcream" class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.</p>
                    </div>
                </div>
            </div>
        </section>
        <section id="Contact" class="bg-light">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 mx-auto">
                        <h2>Contact</h2>
                        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.</p>
                    </div>
                    <div class="col-lg-4">
                        <a href="#">
                            <img class="img-fluid" src="http://placehold.it/400x400" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- Footer -->
        <footer class="py-5 bg-dark">
            <div class="container">
                <p class="m-0 text-center text-white">Copyright © Iterms Group Bvba</p>
                <p class="m-0 text-center text-white">Website created by Jason Lommelen</p>
            </div>
        </footer>

        <!-- Custom JavaScript for this theme -->
        <script src="Js/SmoothScroll.js" type="text/javascript"></script>

    </body>

    <!-- BOOTSTRAP SCRIPTS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

</html>

The first line is my javascript code the second is my CSS code and the last one is my HTML code but it should work and I have been adding it in the right way in my opinion.

Upvotes: 2

Answers (2)

Sven Cazier

Reputation: 407

The answer to this can be found right here:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

You're using the slim version (standardly supplied by Bootstrap), but the slim version doesn't have the animate function. So to fix it just remove ".slim" from https://code.jquery.com/jquery-3.3.1.slim.min.js.

Also you do need to use ".js-scroll-trigger" instead of ".scroll", even though you could just use ".nav-link" as well.

Upvotes: 1

Dabees

Reputation: 504

Almost all browser adopts scroll-behavior: smooth;you can check on MDN so no need to use JS anymore

Im quoting from MDN

a {
  display: inline-block;
  width: 50px;
  text-decoration: none;
}
nav, scroll-container {
  display: block;
  margin: 0 auto;
  text-align: center;
}
nav {
  width: 339px;
  padding: 5px;
  border: 1px solid black;
}
scroll-container {
  display: block;
  width: 350px;
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
scroll-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 5em;
}

<nav>
  <a href="#page-1">1</a>
  <a href="#page-2">2</a>
  <a href="#page-3">3</a>
</nav>
<scroll-container>
  <scroll-page id="page-1">1</scroll-page>
  <scroll-page id="page-2">2</scroll-page>
  <scroll-page id="page-3">3</scroll-page>
</scroll-container>

you can also do something like this

$(document).ready(function () {
    $('html, body').animate({
        scrollTop: $('#today').offset().top - 50
    }, 800, "easeOutCubic");
});

Upvotes: 0

SmoothScroll nav doesn&#39;t work with bootstrap 4

Answers (2)

Related Questions

SmoothScroll nav doesn't work with bootstrap 4