使用js控制滾動條的位置

我們在專案中可能會遇到這樣的需求，控制頁面滾動條的位置，來顯示不同的內容。這裡給出一個使用原生js來控制滾動條的方法，實現起來非常簡單

一、HTML程式碼

<div id="box">
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
    <p>1111111111111111111111</p>
</div>

二、CSS程式碼

div{
    width: 200px;
    height: 200px;
    background-color: #ccc;
    border: 2px solid #666;
    margin: 60px auto;
    overflow: scroll;
    overflow-x: hidden;
}

三、js程式碼

window.onload=function(){
    var box=document.getElementById("box");
    box.scrollTop=box.scrollHeight;
}