js 滚动条平滑移动

最新推荐文章于 2023-05-11 17:40:48 发布

Rand Tsui

最新推荐文章于 2023-05-11 17:40:48 发布

阅读量3.2k

点赞数

分类专栏： web前端文章标签： javascript 滚动条

本博客所有公开的原创博文皆允许转载，无须再征求作者本人（也就是我）同意

本文链接：https://blog.csdn.net/for_cxc/article/details/51004940

版权

web前端专栏收录该内容

85 篇文章 1 订阅

订阅专栏

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;
}