What is a Scrollbar?
A Scrollbar 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 Scrollbar in Blogger?
The very first thing you’ll be required to do is to first 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>
/*<![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.
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.
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.
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.
EmoticonEmoticon