HTML5用scrollIntoView()方法来规范滚动页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#roll_top {
position: relative;
height: 1200px;
font-size: 50px;
color: #FFF;
background-color: #42a3ad;
}
#bottom {
position: absolute;
display: block;
left: 0;
bottom: 0;
}
</style>
</head>
<body>
<h2>scrollIntoView</h2>
<div>
<button id="roll1">scrollIntoView(false)</button>
<button id="roll2">scrollIntoView(true)</button>
<div>
<div id="roll_top">
scrollIntoView(ture)元素上边框与视窗顶部齐平
<span id="bottom">scrollIntoView(false)元素下边框与视窗底部齐平</span>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
window.onload = function() {
document.querySelector("#roll1").onclick = function() {
document.querySelector("#roll_top").scrollIntoView(false); //底部齐平
};
document.querySelector("#roll2").onclick = function() {
document.querySelector("#roll_top").scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
};
// scrollIntoView({block: "end"}) === scrollIntoView(false)
// scrollIntoView({behavior: "instant", block: "end", inline: "nearest"});
/*
behavior 可选
定义缓动动画, "auto", "instant", 或 "smooth" 之一。默认为 "auto"。
block 可选
"start", "center", "end", 或 "nearest"之一。默认为 "center"。
inline 可选
"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
*/
}
</script>
参考自MDN文档