How to add smooth scroll on blogger

October 29, 2020 November 10, 2020

The smooth scroll very important for a blog. If you add any jump link on your then a smooth scroll is must for your blog. When anyone clicks on any jump link you may see the link upper directly. If you want to make the jump link upper style looks better then you can use the smooth scrolling effect.

What is a smooth scroll?

The smooth scroll is one kind of scrolling effect. If you add any jump link for auto-scroll then a smooth-scroll helps you a lot. If you want to know more about a smooth scroll you can see on Wikipedia.

Button

How to install a smooth scroll on the blogger blog?

If you want to install a smooth scroll on your blogger blog there are two ways, the first one is using javascript and the second is using CSS.

Install with javascript

Go to the blogger dashboard then click on the theme then edit HTML. Now search for </body> tag. 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>

Save your theme. If you see it does not work after saving then install the below cdn on the theme, for adding the below cdn search for <head> tag then add the below code before the <head> tag

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

Now save your theme and see the result on your blog.

Install with CSS

First, open your blogger dashboard then go to the theme edit HTML mode and search for ]]></b:skin> tag and add the below code after the tag.

html{scroll-behavior: smooth;}

Finally, save the Theme and see the results.

Conclosing

Brother doesn't use both methods at one time you can only use one method at the same time. My suggestion is to use the CSS method because there is so small line of code so it does not make your site loading slow.

On the javascript, it's a lot of code but on the CSS there only one line of code. So CSS is the best choice for your blog. If you feel this full article helpful be sure to tell us your opinion on the below comment form. Thanks for with us.

Blogger

Techy Rel