How to Add a Auto Scrolling Scroll bar in Blogger

In this article, we will show you how to add a auto scrolling scroll bar in blogger.


What is a Scroll bar?

A Scroll bar is a GUI (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?

 

1.      Log in to your blogger account

2.      Go to Template >> Edit HTML

3.      Search for the ending </html> tag

4.      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 value 10 in the above code.  Increase 10 to 100 or 1000 to make the scroll work slowly.

This technique can also be applied to a div, if you like to scroll only a certain element on your blog website. What you need to do is to replace the body to a div name from the above code. For example, <div id=”test”> the first line of the code would become  var div = $('#test'); and vice versa.

After copying the code, click on “Save Template” button located at the top of your screen.

We hope this article has helped  in learning how to add a auto scrolling scroll bar in blogger.