How to Add Automatic Page Scroll Widget to Blogger

Do you know you can enable the auto page scroll effect in your blogger posts/pages with play and pause button? Whether you may know it or not, but I must say that automatic page scroll widget is impressive. You have the free options to choose the widget placement anywhere in your template. You can align the widget to the bottom left corner, bottom right corner or just next to the post title. Don't confuse yourself by Scroll saw.

Read Also: How To Disable Text Selection On Blogger With CSS

How Does Auto Scroll Widget Works?

When you land on your blog homepage or post page, the page scroll widget will start showing. I have used the two buttons to control the play and pause functionality likewise in blogger media player. As you press the play button, the page will start the scrolling automatically from the top to the bottom until you hit the pause button. If you press the scroll icon twice or thrice, the scrolling speed will get increased dramatically. In this way, you can stop the scroll effect following by the same procedure.

Demo
Click here

Check out: How to Show Your Blogger Visitor's Their IP Address on Your Blog

The more you hit the play icon, the more you will gain the speed. For instance, if you click the scroll icon thrice then you have to click the stop icon three times too to pause the scrolling effect.

To Add the Auto Page Scroll to Blogger, Follow the Steps:

1. Within your, Blogger jump to Dashboard
2. Navigate to Theme click Edit HTML
3. Look for the </body> and place the widget code before the </body>
4. Click Save Theme

<style type='text/css'>
#abt-scroll{position:fixed;z-index:9999;bottom:0;left:10px;top:380px!important;}
#abt-scroll a{display:block;float:left;width:32px;height:32px;text-indent:-999em; padding: 3px!important;}
#abt-scroll a.abt-scroll{font-family:FontAwesome;border-radius:50%;}
#abt-scroll a.abt-stop{font-family:FontAwesome;margin-left:2px;border-radius:50%;}
#abt-scroll a.abt-stop{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0vUra88qmqqVQokXJkxzLiOB5EfCX5qHxR8ROJ1sJF3km3kzFpVoweOuZmY6wlxpO3BNPwlwaZNRi3QMXRDio3OiAVZQbfxmdR1GmhVEq2p6xwftZ8T0vkphyl4lkEQn-j_9FtqLl71_M/s1600/pause.png");}
  #abt-scroll a.abt-scroll{width:33px;height:33px;!important;}
 #abt-scroll a.abt-stop{width:34px;height:34px;}
#abt-scroll a.abt-scroll{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6LrJspwqStxpeOCx8kBV2-RyyIRp-n5XJf18pJq7M88254Px0N4QQA0yOyzp1RMehdyWrWQ424xD6nnMCT7xCp5UFAKVR7GxJM0-uDhzqKmLp3RmDJemqKFXGfNqBnMYPfYGb0t_J6OlR/s1600/play.png");}
</style>
<script type='text/javascript'>
function autoScroll(){window.scrollBy(0,1);scrolldelay=setTimeout(&#39;autoScroll()&#39;,80)}
function stopScroll(){clearTimeout(scrolldelay)}
</script>
<div id='abt-scroll'>
<a class='abt-scroll' href='javascript:autoScroll();' rel='nofollow' title='Play'>Play</a>
<a class='abt-stop' href='javascript:stopScroll();' rel='nofollow' title='Pause'>Pause</a>
</div>

Customization:

If you wish to change the icon set, simply replace the blue text with your preferred one. The value 80 defines the default speed of the widget. You may like to change the value to increase or decrease the scrolling speed.