CODEWITHSUNDEEP
javascripthtmljquerycss
BruceyBandit
BruceyBandit

Reputation: 4324

Page does not smooth scroll, instead it jumps to section

I have a website (https://www.metis-online.com) with a call to action and nav bar links along the top of the website. If you click on any of the links, you notice it jumps to the page instead of smooth scrolling to the page. Not sure why it's not smooth scrolling to the relevant anchor link.

My anchor links always have a #. So example it's like: https://www.metis-online.com/#courses https://www.metis-online.com/#services etc

head.php:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script>
        $(document).ready(function(){
  // Add smooth scrolling to all links
  $('a[href^="/#"]').on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});

    </script>

header.php

<!-----NavigationBar---->

<section id="top">
</section>

<section id="nav-bar">

    <nav class="navbar navbar-expand-lg navbar-light">
 
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/../#top">HOME</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/../#about">ABOUT</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/../#courses">COURSES</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/../#services">SERVICES</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="/../#testimonials">TESTIMONIALS</a>
              </li>
                <li class="nav-item">
                    <a class="nav-link" href="/../#contact">CONTACT</a>
                </li>
            </ul>
        </div>
    </nav>
</section>

home.php (this is the homepage)

<html>

<head>

 <?php include "./head.php" ?>
</head>

<body>

 <?php include "./header.php" ?>

    <!-------About------->
    <section id="about">
    ...
    </section>
    <!-------Courses------->
    <section id="courses">
    ...
    <a href="courses/course-BRFAITC009">
    <button type="button">Order online course and exam bundle</button>
    </a>
    ...
    </section>
    <!-------Services------->
    <section id="services">
    ...
    </section>
    <!-------Testimonials------->
    <section id="testimonials">
    ...
    </section>
    <!-------Contacts------->
    <section id="contacts">
    ...
    </section>

...

</body>
</html>

CSS:

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

Upvotes: 3

Views: 1375

Answers (2)

Cypherjac
Cypherjac

Reputation: 879

Try removing this strict equality check:

if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();

And change it to:

if (this.hash != "") { ...

Your problem is right here:

$('a[href^="/#"]').on('click', ...

This line looks for an anchor beginning with "/" instead of "#", change it to:

$('a[href^="#"]').on('click', ...

Upvotes: 2

Tudor Alexandru
Tudor Alexandru

Reputation: 269

You tried this in your css?

html{
  scroll-behavior: smooth;
};

This will make a smooth transition to the content when you click on the navbar links.

Upvotes: 2

Related Questions