How to Add a Auto Scrolling Scrollbar in Blogger

Advertisements
In the past we have already 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 readers to go through the whole page before leaving 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, 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.
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, Windows, Apple 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 >> 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. If you want to limit this scroll to certain pages then check out how to show or hide a widget on certain URLs 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.

Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

1 comments:

January 18, 2015 at 1:46 AM

Error parsing XML, line 1568, column 2: The markup in the document following the root element must be well-formed.


please help.. this is the error im getting

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.