我有以下代码 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)
最佳答案
如果您使用 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') 更改 $(document) 选择器，这应该可以工作。
关于javascript - 元素出现时自滚动页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30629596/