How to Add an Auto Scrolling Scrollbar in Blogger

In the past we have as of now demonstrated to you best practices to tweak your scrollbar in blogger with diverse styles, colors and customization. As of late, one of our clients asked us how to include auto scrollbar in blogger that naturally scrolls the page from the through and through. Making your scrollbar scroll naturally is an immaculate approach to marginally constrain your perusers to experience the entire page before leaving your site. In this article, we will demonstrate to you proper methodologies to include an auto scrolling scrollbar in blogger

What is a Scrollbar?

A Scrollbar is a GUI (graphical control component) which controls components like content, pictures, features and else other possibilities accessible on the site page. In other straightforward words, its a long thing bar spotted at the right half of your screen by which a component can be scrolled with the assistance of a mouse.

It additionally has of two upwards and downwards bolts that helps you to span up or down the page. It is for pages as well as discover them on other programming like Word, Windows, Apple OS and so forth.

The most effective method to include Auto Scrolling Scrollbar in Blogger?

The primary thing you'll be obliged to do is to first login to your blogger account and select a site on which you'll like to include auto parchment bar. Presently go to Template >> Edit HTML >> scan for the completion  label (you will discover it the end of the codes). In the wake of discovering  just above it glue the accompanying code:

<script>
    /*<![CDATA[*/
    var div = $('body');
    setInterval(function() {
            var pos = div.scrollTop();
            div.scrollTop(pos + 2);
        }, 10)
        /*]]>*/
</script>

<style>
    body {
        overflow-y: scroll;
    }
</style>

You can increase the scroll speed by reducing the 10 in the above code.  While, increasing 10 to 100 or 1000 would make the scroll work slowly.

This technique can also be applied to a div, if you want to scroll only a certain element on your site. All you need to do is to replace the body to a div name from the above code.

 Like for <div id=”test”> the first line of the code would become  var div = $('#test'); and vice versa.

Once everything is done, save the template by pressing “Save Template” button located at the top of your screen. Congratulations, you have successfully installed the auto scrolling page feature in blogger. If you want to limit this scroll to certain pages then check out how to show or hide a widget on certain URLs in blogger.

We hope this article has helped everyone in learning how to add a auto scrolling scrollbar in blogger.  Share your thoughts about this small but useful tip in the comment section below. If you have any suggestion or requests feel free to write us using our contact us page.

About the Author:

Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More

Follow him @ Twitter |Facebook