Here is some jQuery code I have:
$(".col-md-12").hide();
$(".button-div").hide();
$(".featurette-divider").hide();
$(".footer").hide();
$(".first").fadeIn(1000);
$(".second").delay(900).fadeIn(1000);
$(".third").delay(1800).fadeIn(1000);
$(".fourth").delay(2700).fadeIn(1000);
$(".button-div").delay(3600).fadeIn(1000);
$(".featurette-divider").delay(4000).fadeIn(1000);
$(".footer").delay(5000).fadeIn(1000);
I am looking to automatically scroll the page to the bottom as each element appears.
UPDATE 1
<div class="container">
<div class="col-md-12 first">
<div class="thumbnail">
<div class="caption">
<h3>hero name</h3>
<img src="..." alt="...">
<p></p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<colgroup>
<col class="col-xs-1">
<col class="col-xs-7">
</colgroup>
<thead>
<tr>
<th colspan="2" style="text-align:center">Abilities</th>
</tr>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<code>.active</code>
</th>
<td>Applies the hover color to a particular row or cell</td>
</tr>
<tr>
<th scope="row">
<code>.success</code>
</th>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<th scope="row">
<code>.info</code>
</th>
<td>Indicates a neutral informative change or action</td>
</tr>
<tr>
<th scope="row">
<code>.warning</code>
</th>
<td>Indicates a warning that might need attention</td>
</tr>
<tr>
<th scope="row">
<code>.danger</code>
</th>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div><!-- end col-lg-6 -->
<!-- More similar content with different hero names and abilities -->
<div class="centered button-div">
<button type="button" class="btn btn-danger btn-lg">Next <span class="glyphicon glyphicon-arrow-right"></span></button>
</div>
<hr class="featurette-divider">
<footer class="footer">
<p>© 2015 · <a href="#">About</a> · <a href="#">Contact</a></p>
</footer>
</div>
This is my Bootstrap-based HTML layout, containing a container for the content.