js 滚动条平滑移动

html页


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../Scripts/JavaScript9.js"></script>
    <link href="../Content/StyleSheet9.css" rel="stylesheet" />
    <script src="../Scripts/cxc.js"></script>
	<meta charset="utf-8" />
</head>
<body>
    <input type="button" id="bt" value="滑动滚动条" />
    <div id="back">
    </div>
    <div id="container">
        <div id="main">
            <div class="d">
                <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p>
            </div> 
            <div class="d">
                <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p>
            </div>  
            <div class="d">
                <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p>
            </div>  
            <div class="d">
                <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p>
            </div>  
            <div class="d">
                <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p>
            </div>
            <div class="d">
                <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p>
            </div>
            <div class="d">
                <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p>
            </div>
            <div class="d">
                <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p>
            </div>    
            <div class="d">
                <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p>
            </div>
            <div class="d">
                <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p>
            </div>
            <div class="d">
                <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p>
            </div>
            <div class="d">
                <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p>
            </div> 
            <div class="d">
                <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p>
            </div>
            <div class="d">
                <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p>
            </div>
            <div class="d">
                <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p>
            </div>
            <div class="d">
                <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p>
            </div> 
        </div>
    </div>
</body>
</html>


js页

var body, back, container, main,bt; //dom

window.onload = function () {
    domload();
    dominit();
    events();
};
var domload = function () {
    body = document.body;
    back = $("back");
    container = $("container");
    main = $("main");
    bt = $("bt");
};
var dominit = function () {
    setH(back, screenH);
    setH(container, screenH);
    setH(main, screenW);
};
var events = function () {
    AddEvent(bt, EventsType[0], function () {
        var speed = 10;
        var min = 0,max = 449;
        var scrolldown = function () {
            min += speed;
            if (min < max) {
                container.scrollTop = min;
                setTimeout(scrolldown, 4);
            }
        };
        setTimeout(scrolldown, 100);
    });
};

css页

* {
    margin:0px;
    padding:0px;
}
#back {
    position: absolute;
    width: 100%;
    top: 0px;
    left: 0px;
    z-index: 1;
    background-image: url('../Images/psbg/bg7.png');
}
#container{
    position:absolute;
    width:100%;
    top:0px;
    left:0px;
    z-index:100;
    overflow:auto;
}
#main{
    position:absolute;
    width:100%;
    top:0px;
    left:0px;
}
.d{
    margin-top:50px;
}
#bt{
    position:absolute;
    top:0;
    right:50px;
    z-index:200;
}


你可能感兴趣的:(JavaScript,滚动条)