html5-scrollIntoView

Veröffentlicht am

html5-scrollIntoView

前言：今天不拽英文了，踏踏实实说点人话。今天杨绛女士去世，享年105岁！一个在钱钟书眼中“最贤的妻，最才的女”—杨绛留下九句话句句箴言，以下最为欣赏：

  • 你的问题就在于读书不多而想得太多
  • 一个人经过不同程度的锻炼，就获得不同程度的修养，不同程度的效益
  • 我和谁都不争，和谁争都不屑。简朴的生活、高贵的灵魂是人生的至高境界。
    以上！
    Next,let’s talk about element.scrollIntoView()…
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <head>
        <style type="text/css">
            div{
                background-color: pink;
                height: 430px;
            }
            button{
                position: fixed;
                bottom: 0;
                right: 0;
                color: #fff;
                background-color: #000;
            }
        </style>
    </head>
    <body>
        <button onclick="scroll(true);">come on</button>
        <span id="hi">welcome!</span>
        <div>1</div>
        <div>2</div>
        <script type="text/javascript">
            function scroll(alignToTop) {
                var test=document.getElementById("hi");
                test.scrollIntoView(alignToTop);
            }
        </script>
    </body>

hit the button,we can go back to the element “#hi”.So,we can realize scrolltotop in this way.
today,we talk about both compatibility and usage. We talk about which element it can control,and how!
Span/Div it can!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<head>
    <style type="text/css">
        div{
            background-color: pink;
            height: 430px;
        }
        button{
            position: fixed;
            bottom: 0;
            right: 0;
            color: #fff;
            background-color: #000;
        }
    </style>
</head>
<body>
    <button onclick="scroll(true);">come on</button>
    <div id="hi">1</div>
    <div>2</div>
    <div>3</div>
    <script type="text/javascript">
        function scroll(alignToTop) {
            var test=document.getElementById("hi");
            test.scrollIntoView(alignToTop);
        }
    </script>
</body>

form/input it can!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<head>
    <style type="text/css">
        div{
            background-color: pink;
            height: 430px;
        }
        button{
            position: fixed;
            bottom: 0;
            right: 0;
            color: #fff;
            background-color: #000;
        }
    </style>
</head>
<body>
    <button onclick="scroll(true);">come on</button>
    <form id="hi">
        <input type="text" name="name">
    </form>
    <div>2</div>
    <div>3</div>
    <script type="text/javascript">
        function scroll(alignToTop) {
            var test=document.getElementById("hi");
            test.scrollIntoView(alignToTop);
        }
    </script>
</body>

ul/li……all can!

we can use in this way.To control elements everywhere.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
    <div style="height:200px; overflow:auto; background-color:#e0d0b0;">
        <div style="height:200px;"></div>
        <span id="redText" style="color:red">Red text for scroll test.</span>
        <div style="height:200px;"></div>
    </div>
    <button onclick="ScrollRed (true);">Scroll the red text into the top of visible area!</button>
    <button onclick="ScrollRed (false);">Scroll the red text into the bottom of visible area!</button>
    <script type="text/javascript">
        function ScrollRed (alignToTop) {
            var redText = document.getElementById ("redText");
            redText.scrollIntoView (alignToTop);
        }
    </script>
</body>

all above!