控制页面的滚动条
1. 控制页面滚动条，跳到页面底部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery/jquery.min.js"></script>
<script>
$(function(){
$('#toBottom').on("click", function(){
var bottom = $("#bottom", window.document).offset().top
console.log("bottom: " + bottom);
$('html, body', window.document).stop().animate(
{
scrollTop: bottom
}, 1000, function() {
console.log("animate complete.")
}
);
});
$('#toBottom').trigger("click");
});
</script>
</head>
<body>
<button id="toBottom" href="#bottom">click me jump to bottom</button>
<p>out</p>
<p>out</p>
<p>out</p>
<p>out</p>
<p>out</p>
<p>out</p>
<p>out</p>
<p>out</p>
<p>out</p>
<p>out</p>
<p>out</p>
<p>out</p>
<p>out</p>
<p>out</p>
<p>out</p>
<p>out</p>
<div id="bottom"></div>
</body>
</html>
2. 在iframe内部控制父页面滚动条滚到底部。
2.1 parent.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<iframe name="iframe1" id="iframe1" width="100%" height="600" style="border: 0;"
src="inner.html" >
</iframe>
<p>out</p>
<p>out</p>
<p>out</p>
<p>out</p>
<p>out</p>
<p>out</p>
<p>out</p>
<p>out</p>
<p>out</p>
<p>out</p>
<p>out</p>
<p>out</p>
<p>out</p>
<p>out</p>
<p>out</p>
<p>out</p>
<div id="bottom"></div>
</body>
</html>
2.2 inner.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery/jquery.min.js"></script>
<script>
$(function(){
$(document).on("BarToToped", function(){
var bottom = $("#bottom", window.parent.document).offset().top
console.log("bottom: " + bottom);
$('html, body', window.parent.document).stop().animate(
{
scrollTop: bottom
}, 1000, function() {
console.log("animal complete.")
}
);
});
$(document).trigger("BarToToped");
});
</script>
</head>
<body>
<p> inner</p>
<p> inner</p>
<p> inner</p>
<p> inner</p>
<p> inner</p>
<p> inner</p>
<p> inner</p>
<p> inner</p>
<p> inner</p>
<p> inner</p>
<p> inner</p>
<p> inner</p>
<p> inner</p>
<p> inner</p>
<p> inner</p>
<p> inner</p>
<p> inner</p>
<p> inner</p>
<p> inner</p>
<p> inner</p>
<p> inner</p>
<p> inner</p>
<p> inner</p>
<p> inner</p>
<p> inner</p>
<p> inner</p>
<p> inner</p>
<p> inner</p>
<p> inner</p>
<p> inner</p>
<p> inner</p>
<p> inner</p>
<p> inner</p>
<p> inner</p>
<p> inner</p>
<p> inner</p>
<p> inner</p>
<p> inner</p>
</body>
</html>
3. 总结：
3.1 滚动效果
animate
scrollTop
3.2 事件绑定，触发事件
$(document).on("BarToToped", function(){ ...})
$(document).trigger("BarToToped");
3.3 在iframe内部调用外部元素
$("#bottom", window.parent.document)
