In the past we have alrdy shown you how to customize your scrollbar in blogger with different styles, colors and customization. Recently, one of our users asked us how to add auto scrollbar in blogger that automatically scrolls the page from the top to bottom. Making your scrollbar scroll automatically is a perfect way to slightly force your rders to go through the whole page before
lving your site. In this article, we will show you how to add a auto scrolling scrollbar in blogger
What is a Scrollbar?
A Scrollbar is a GUI (graphical control element) which controls elements like text, pictures, s and anything else available on the webpage. In other simple words, it’s a long thing bar loed at the right side of your screen by which an element can be scrolled with the help of a mouse.
It also has of two upwards and downwards arrows that helps you to scroll up or down the page. It is not only for webpages but you can also find them on other software like Word, , OS and etc.
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 >> srch for the ending </html> tag (you will find it the end of the ). After finding </html> just above it paste the following :
<script>
/*<![ATA[*/
var div = $('body');
setInterval(function() {
var pos = div.scrollTop();
div.scrollTop(pos + 2);
}, 10)
/*]]>*/
</script>
<style>
body {
overflow-y: scroll;
}
</style>
You can incrse the scroll speed by reducing the 10 in the above . While, incrsing 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 . Like for <div id=”test”> the first line of the would become var div = $('#test'); and vice versa.
Once everything is done, save the template by pressing “Save Template” button loed at the top of your screen. Congratulations, you have successfully installed the auto scrolling page fture in blogger.
We hope this article has helped everyone in lrning 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.
No comments:
Post a Comment