jQuery Plugin To Auto Scroll Down A Web Page - Hungry Scroller

Hungry Scroller is a jQuery plugin to create page scroll controls which allow the visitors to automatically scroll down the web page at a predetermined speed.

How to use it:

1. Add the page scroll controls in your web page.

<ul class="scroller">
  <li class="scroll">Start Scroll</li>
  <ul class="speeds">
    <li class="slow">Famished-Slow</li>
    <li class="med">Peckish-Med</li>
    <li class="fast">Bite Size-Fast</li>
  </ul>
</ul>

2. The sample CSS to style the page auto scroll controller.

ul.scroller {
  position: fixed;
  top: 25%;
  left: 0;
  list-style-type: none;
  padding: 0;
}

ul.speeds {
  padding-left: 0;
  display: none;
  list-style-type: none;
}

ul.scroller li { text-align: center; }

ul.scroller li:hover {
  background: #222;
  cursor: pointer;
}

.scroller li {
  background: rgba(51,51,51,0.6);
  padding: 20px;
  color: #fff;
  position: relative;
}

.appear { display: block; }

.left-list-border { border-left: 1px solid rgb(135,190,39); }

3. Include the latest jQuery library and the jQuery Hungry Scroller plugin at the bottom of your web page.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/hungryscroller.js"></script>

4. Call the plugin on body/Html tags and set the auto scroll speed you wish to apply.

$(function(){
$('body,html').hungryscroller({

  // scrolls through document in 45 seconds
  slowSpeed: 45000, 

  // scrolls through document in 22 seconds
  medSpeed: 22000, 

  // scrolls through document in 15 seconds
  fastSpeed: 15000

});
});

---

This awesome jQuery plugin is developed by ivz. For more Advanced Usages, please check the demo page or visit the official website.