h5中控制元素滚动到指定位置。

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <meta charset="utf-8">
    5.     <style>
    6.         #myDIV {
    7.             height: 250px;
    8.             width: 250px;
    9.             overflow: auto;
    10.             background: green;
    11.         }
    13.         #content {
    14.             margin:500px;
    15.             height: 800px;
    16.             width: 2000px;
    17.             background-color: coral;
    18.             position: relative;
    19.         }
    20.     </style>
    21. </head>
    22. <body>
    24. <p>单击按钮以滚动到元素的顶部或底部</p>
    26. <button onclick="toTop()">滚动到元素的顶部</button>
    27. <button onclick="toBottom()">滚动到元素的底部</button>
    28. <button onclick="toTopTrans()">到顶部加动画</button>
    30. <div id="myDIV">
    31.     <div id="content">
    32.         <div style="position:absolute;top:0;">顶部</div>
    33.         <div style="position:absolute;bottom:0">顶部</div>
    34.     </div>
    35. </div>
    37. <script>
    38.     var elmnt = document.getElementById("content");
    40.     function toTop() {
    41.         elmnt.scrollIntoView(true);
    42.     }
    44.     function toBottom() {
    45.         elmnt.scrollIntoView(false);
    46.     }
    48.     function toTopTrans(){
    49.         elmnt.scrollIntoView({
    50.             behavior:'smooth'
    51.         })
    52.     }
    54. </script>
    56. </body>
    57. </html>