How to install smooth scroll on blogger

Hi, welcome to techno mania after a few days I am share and article about how to add a stylish table of content on blogger but one of techno mania visitor ask me how when anyone click on the table of content it takes the visitor to the header without any scrolling effect. This why I am writing a new article about how to install smooth scroll on a blogger. So I am showing you two ways to add smooth scroll on blogger.

DEMO

Table Of Contents

1. Install smooth scroll using CSS
2. Install smooth scroll using JavaScipt & jQuery
3. Final word

Install smooth scroll using CSS

So fast go to Blogger dashboard then click on the theme on go to theme HTML edit. Now search for </style> tag and add the below code after </style> tag.

html{scroll-behavior: smooth;}

Now save the theme. The smooth scroll adding was done by using CSS.

Install smooth scroll using JavaScipt & jQuery

So let's search for </body> tag and add the below code after </body> tag.

<script async="async" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

If you see on your theme there is already place Jquery then don't need to add this (the minimum version of Jquery need 2.2.4)

Now add the below code after </body> tag. 

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 $('a[href^="#"]').on('click',function (e) {
     e.preventDefault();
     var smooth = this.hash,
     $smooth = $(smooth);
     $('html, body').stop().animate({
         'scrollTop': $smooth.offset().top
     }, 900, 'swing', function () {
         window.location.hash = smooth;
     });
 });
});
//]]>
</script>

Finally, save your theme smooth scroll added done.

Last word

Hello, visitor there I am providing you two script CSS & javascript. Now you need to use any of them but my suggestion is to use CSS because it's so lightweight and if you use CSS version so there isn't so much script on your blog.

Because if you use javascript there is so much script your site will underperformance example: speed down. Please share your opinion on the comment box.