Smooth Scroll Using Jquery

In this tutorial, I'll show you how to make Smooth Scroll in Navigation using Jquery.

Click Here for DEMO

First thing, we need HTML to create the navigation and some content so that the page will scroll accordingly. Here is the code:

HTML
<nav id="nav">
   <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About Us</a></li>
      <li><a href="#services">Our Services</a></li>
      <li><a href="#gallery">Gallery</a></li>
      <li><a href="#contact">Contact Us</a></li>
   </ul>
</nav>
<main>
   <section id="home" class="block">
      <p>Home <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, animi consequuntur, ducimus, nesciunt nisi repellendus ipsam odio, ipsa quod quibusdam voluptatum! Illo laudantium ex, ab alias, veritatis deserunt rerum odio.</p>
   </section>
   <section id="about" class="block red">
      <p>About Us <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, animi consequuntur, ducimus, nesciunt nisi repellendus ipsam odio, ipsa quod quibusdam voluptatum! Illo laudantium ex, ab alias, veritatis deserunt rerum odio.</p>
   </section>
   <section id="services" class="block black">
      <p>Our Services <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, animi consequuntur, ducimus, nesciunt nisi repellendus ipsam odio, ipsa quod quibusdam voluptatum! Illo laudantium ex, ab alias, veritatis deserunt rerum odio.</p>
   </section>
   <section id="gallery" class="block blue">
      <p>Gallery <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, animi consequuntur, ducimus, nesciunt nisi repellendus ipsam odio, ipsa quod quibusdam voluptatum! Illo laudantium ex, ab alias, veritatis deserunt rerum odio.</p>
   </section>
   <section id="contact" class="block light-blue">
      <p>Contact Us <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, animi consequuntur, ducimus, nesciunt nisi repellendus ipsam odio, ipsa quod quibusdam voluptatum! Illo laudantium ex, ab alias, veritatis deserunt rerum odio.</p>
   </section>
</main>

Then, we need CSS to style up the things. Here I use SCSS so I'll share you SCSS code.
SCSS
#nav{
   position: absolute;
   left: 0;
   right: 0;
   z-index: 1;

   &.sticky{
      position: fixed;
      top: 0;
   }

   ul{
      @extend %listreset;
      background: $light-blue;
      max-width: 640px;
      margin: 0 auto;
   }

   li{
      display: inline-block;
      vertical-align: top;
   }

   a{
      color: $white;
      display: block;
      padding: 10px 20px;
      transition: opacity 0.3s linear;
      -webkit-transition: opacity 0.3s linear;

      &:hover{
         text-decoration: none;
         opacity: 0.6;
      }

      &.active{
         opacity: 0.6;
      }
   }
}

.block{
   @include v-align;
   background: green;
   height: 100vh;
   padding: 20px;
   color: $white;

   &.red{
      background: red;
   }

   &.black{
      background: black;
   }

   &.blue{
      background: blue;
   }

   &.light-blue{
      background: $light-blue;
   }
}

Finally, we need Jquery Code to make smooth scroll in your project. So, here's the Jquery below.
Jquery
$(document).ready(function(){
 var topOffset = $('#nav').height();
   $('#nav a[href^="#"]').on('click', function(event) {
    $('.active').removeClass('active');
    $(this).addClass('active');
      var target = $(this.getAttribute('href'));
      if( target.length ) {
         event.preventDefault();
         $('html, body').animate({
            scrollTop: target.offset().top - topOffset
         }, 1000);
      }
   });
});

I hope this is working well. If you have any thought or any new sharing, feel free to comment below.

Cheers!!

Share this

Related Posts