In now a days smooth scrolling is must needed functionality we need in our design. It make the User experience better. In this blog we will see how to do smooth scrolling on the current page with Java Script & jQuery.

Just copy paste the below code in your js file.

For Javascript :

$(function() {
 $('a[href*="#"]:not([href="#"])').click(function() {
   if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
  var target = $(this.hash);
  target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
  if (target.length) {
   $('html, body').animate({
    scrollTop: target.offset().top
   }, 1000);
   return false;
  }
 }
});
});

For jQuery:

jQuery(function($) {
 $('a[href*="#"]:not([href="#"])').click(function() {
   if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
  var target = $(this.hash);
  target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
  if (target.length) {
   $('html, body').animate({
    scrollTop: target.offset().top
   }, 1000);
   return false;
  }
 }
});
});

By using above scripts you will see how smooth site’s user experience is.

There are currently no comments.