• LOGIN
  • No products in the cart.

Smooth Scrolling With jQuery

HTML

<ul>
   <li class="active-menu"><a class="scroll" href="#home">Home</a></li>
   <li><a class="scroll" href="#blue">Blue</a></li>
   <li><a class="scroll" href="#red">Red</a></li>
   <li><a class="scroll" href="#black">Black</a></li>
   <li><a class="scroll" href="#orange">Orange</a></li>
</ul>

jQuery

// Smooth scrolling
 
    var scrollLink = $('.scroll');
    scrollLink.click(function(e) {
      e.preventDefault();
      $('body,html').animate({
      scrollTop: $(this.hash).offset().top
      } );
    });

// Active link switching
  $(window).scroll(function() {
    var scrollbarLocation = $(this).scrollTop();
 
    scrollLink.each(function() {
      var sectionOffset = $(this.hash).offset().top -50;
      if ( sectionOffset <= scrollbarLocation ) {
        $(this).parent().addClass('active-menu');//drop this class in li tag
        $(this).parent().siblings().removeClass('active-menu');
      }
    })   
  })

0 responses on "Smooth Scrolling With jQuery"

Leave a Message

Your email address will not be published. Required fields are marked *

© BZIT Online Institute All rights reserved | 2021