CSS Tricks: Smooth Scrolling Effect Using jQuery Simple Code

Smooth scrolling for your website is very useful to look your site professional and stunning. Smooth scrolling effect will provide an excellent feeling of scrolling a site when you scroll an anchor link within the same page.

Steps:

Install jQuery on your webpage either linking to any CDN (Content Delivery Network) or downloading jquery package.

Both Google and Microsoft host jQuery and you can grasp latest version of jQuery from there. Simple use either one from below:

Google CDN:

1:  <head>  
2:  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  
3:  </head>

Copy/paste below codes anywhere of your page you want to use the effect. You can use the code in header, footer, or body of you page.

1:  $(function() {  
2:   $('a[href*=#]:not([href=#])').click(function() {  
3:    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {  
4:     var target = $(this.hash);  
5:     target = target.length ? target : $('[name=' + this.hash.slice(1) +']');  
6:     if (target.length) {  
7:      $('html,body').animate({  
8:       scrollTop: target.offset().top  
9:      }, 1000);  
10:      return false;  
11:     }  
12:    }  
13:   });  
14:  });

CSS Tricks

Tuesday, August 23, 2016

Smooth Scrolling Effect Using jQuery Simple Code

Steps:

Congratulations you are done!

1 comment: