How to Add a Automatic Scroll bar in Blogger?

A Scroll bar is a graphical control element which controls elements like text, pictures, videos and anything else available on the webpage. In other simple words, it’s a long thing bar located at the right side of your screen by which an element can be scrolled with the help of a mouse.

How to add Auto Scrolling Scroll-bar in Blogger?

The very first thing is to login to your blogger account and select a blog on which you’ll like to add auto scroll bar. Now go to Template >> Edit HTML >> search for the ending </html> tag (you will find it the end of the codes). After finding </html> just above it paste the following 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.