Home >Web Front-end >JS Tutorial >js scroll bar smooth movement sample code_javascript skills
The example in this article shares with you the code related to the smooth movement of the js scroll bar for your reference. The specific content is as follows
html page
<!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 page
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 page
* {
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;
}
The above is the entire content of this article, I hope it will be helpful to everyone’s study.