How to Add Smooth Scrolling to Blogspot Blogs

Smooth Scrolling is a great way to give your blog visitors a great scrolling experience. It is useful for those blogs which has long posts and much content.

Smooth scrolling makes your blog easier to navigate as it allows to scroll up or down without no effort using the mouse wheel.

In this post, I am going to share a script by which you can add Smooth Scrolling Feature to your blogger blog easily. The script is very minimalistic and won't affect the loading time of your blog. Also, the script is absolutely free to use.

How to Add Smooth Scrolling to Blogger?

So, Let's start. Steps are damn easy to follow.

• Go to Blogger dashboard and click on Template → Edit HTML.
• Click anywhere in the HTML box and search for </body> tag using CTRL+F (Cmd + F) keys. Found it?
• Now, Copy the below script and place it just above the </body> tag.

<script type='text/javascript'>
//<![CDATA[
// SmoothScrolling
! function(e) {
    jQuery.scrollSpeed = function(n, o) {
        var t = e(document),
            i = e(window),
            l = e("html, body"),
            r = i.height(),
            u = 0,
            a = !1;
        return window.navigator.msPointerEnabled ? !1 : void i.on("mousewheel DOMMouseScroll", function(e) {
            return a = !0, (e.originalEvent.wheelDeltaY & lt; 0 || e.originalEvent.detail & gt; 0) & amp; & amp;
            (u = u + r & gt; = t.height() ? u : u += n), (e.originalEvent.wheelDeltaY & gt; 0 || e.originalEvent.detail & lt; 0) & amp; & amp;
            (u = 0 & gt; = u ? 0 : u -= n), l.stop().animate({
                scrollTop: u
            }, o, "default", function() {
                a = !1
            }), !1
        }).on("scroll", function() {
            a || (u = i.scrollTop())
        }).on("resize", function() {
            r = i.height()
        })
    }, jQuery.easing["default"] = function(e, n, o, t, i) {
        return -t * ((n = n / i - 1) * n * n * n - 1) + o
    }
}(jQuery);
$(function() {
    jQuery.scrollSpeed(100, 800)
})
//]]>
</script>

• Save the templates and that's all. You have added the smooth scrolling feature to your Blogspot blog. Now be the first one to have a look.

Didn't get a suitable template for your blog yet? Check out some fast loading blogger templates.

I hope that the steps were too easy to follow and you didn't face any issues with it. Let me know how's the smooth scrolling is working on your blog?