Post
Ask Question

Customize Scrolling on HTML Page

This simple code snippet helps you customize the scrolling event on your HTML web page. It tracks each scroll.
This would be very handy when designing a single page application.
Now-a-days when user scrolls on the Single page application, the navigation link changes class and displays the user.
Use the snippet andl et me know:
  1. function onScroll() {    
  2.     var scrollPos = $(document).scrollTop();    
  3.     $('.navbar .navClick').each(function () {    
  4.         var currLink = $(this);    
  5.         var refElement = $(currLink.attr("href"));    
  6.         if (refElement.position() != undefined && refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {    
  7.             $('.navbar .navClick').removeClass("active");    
  8.             currLink.addClass("active");    
  9.         }    
  10.         else {    
  11.             currLink.removeClass("active");    
  12.         }    
  13.     });    
  14. }     
  1. $(document).on('click', '.navClick', function (event) {    
  2.     event.preventDefault();    
  3.     var target = "#" + this.getAttribute('data-target');    
  4.     $('a').each(function () {    
  5.         $(this).removeClass('active');    
  6.     });    
  7.     $(this).addClass('active');    
  8.     $('html, body').animate({    
  9.         scrollTop: $(target).offset().top + 70    
  10.     }, "slow", "linear", function () {    
  11.         $(document).on("scroll", onScroll);    
  12.     });    
  13. });   
The second snippet helps you detect the ID clicked and then help you toggle the active class for the nav link clicked.  We need to add data-target on the HTML element in order to track the click and animate the User to the selected div on click.
 
Hope this helps.