HTML5用scrollIntoView()方法来规范滚动页面

HTML5用scrollIntoView()方法来规范滚动页面


<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <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>scrollIntoViewh2>
    <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文档

你可能感兴趣的:(h5/css3)