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>
/*<![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.
