极客教程如何使用jQuery自动滚动到页面底部
要从上到下自动滚动一个页面，我们可以使用jquery中的scrollTop()和height()方法。
在这个方法中，在scrollTop方法中传递文档的高度来滚动。
例子-1：滚动时没有动画。
<!DOCTYPE html>
<html>
<head>
<title>Scroll Automatically</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- jQuery code to show the working of this method -->
<script>
(document).ready(function() {
("button").click(function() {
(document).scrollTop((document).height());
});
});
</script>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<div>
<!-- click on this button
and see the change -->
<button>Click Here!
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
</div>
</center>
</body>
</html>
输出:
- Before:
- After:
例子-2：带动画的滚动。
<!DOCTYPE html>
<html>
<head>
<title>Scroll Automatically</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- jQuery code to show
the working of this method -->
<script>
(document).ready(function() {
("button").click(function() {
("html, body").animate({
scrollTop:(
'html, body').get(0).scrollHeight
}, 2000);
});
});
</script>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<div>
<!-- click on this button
and see the change -->
<button>Click Here!
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
</div>
</center>
</body>
</html>
输出:
- Before:
- After:
jQuery是一个开源的JavaScript库，它简化了HTML/CSS文档之间的交互，它以其 “少写多做 “的理念而广为人知。
你可以通过学习这个jQuery教程和jQuery实例，从基础开始学习jQuery。