我有以下代码jQuery
$(".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);
我希望页面在元素出现时自动滚动到底部。
编辑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 -->
<div class="col-md-12 second">
<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 -->
<div class="col-md-12 third">
<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 -->
<div class="col-md-12 fourth">
<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 -->
<div class="centered button-div">
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger btn-lg">Next <span class="glyphicon glyphicon-arrow-right"></span></button>
</div>
<hr class="featurette-divider">
<!-- FOOTER -->
<footer class="footer">
<p>© 2015 · <a href="#">About</a> · <a href="#">Contact</a></p>
</footer>
</div>
我的HTML布局（基于Bootrstrap）。我已经粘贴了所有内容的包装器（.container）
答案 0 :(得分：0)
如果您使用JQuery的scrolltop功能，您可以将页面滚动到给定的高度（以像素为单位）：
$(document).scrollTop(heightInPixels);
这会将整个文档滚动到最后：
var documentHeight = $(document).height();
$(document).scrollTop(documentHeight);
如果您希望在每个元素出现时发生这种情况，您必须在效果后每次调用此函数，或者在效果结束时进行回调：
function scrollDocument(){
var documentHeight = $(document).height();
$(document).scrollTop(documentHeight);
}
// Element "appearings"
$(".first").fadeIn(1000, scrollDocument );
....
$( ".footer" ).delay(5000).fadeIn(1000, scrollDocument );
我希望这会有所帮助。为了提供更多帮助，我应该了解有关您的布局的更多信息......
修改
$(".col-md-12").hide();
$(".button-div").hide();
$(".featurette-divider").hide();
$(".footer").hide();
function scrollDocument(){
var contentHeight = $(document).height();
$(document).scrollTop(contentHeight);
}
// Element "appearings"
$(".first").fadeIn(1000, scrollDocument);
$(".second").delay(900).fadeIn(1000, scrollDocument);
$(".third").delay(1800).fadeIn(1000, scrollDocument);
$(".fourth").delay(2700).fadeIn(1000, scrollDocument);
$(".button-div").delay(3600).fadeIn(1000, scrollDocument);
$(".featurette-divider").delay(4000).fadeIn(1000, scrollDocument);
$(".footer").delay(5000).fadeIn(1000, scrollDocument);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>Description1</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 -->
<div class="col-md-12 second">
<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>Description2</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 -->
<div class="col-md-12 third">
<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>Description3</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 -->
<div class="col-md-12 fourth">
<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>Description4</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 -->
<div class="centered button-div">
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger btn-lg">Next <span class="glyphicon glyphicon-arrow-right"></span></button>
</div>
<hr class="featurette-divider">
<!-- FOOTER -->
<footer class="footer">
<p>© 2015 · <a href="#">About</a> · <a href="#">Contact</a></p>
</footer>
</div>
只需在上面的代码中使用$（'div.container'）对$（文档）选择器进行切换即可。