js滚动条平滑移动示例代码

2024-03-20 11:03:07 41

本文实例为大家分享了js滚动条平滑移动相关代码，供大家参考，具体内容如下

html页

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

js页

varbody,back,container,main,bt;//dom

window.onload=function(){
domload();
dominit();
events();
};
vardomload=function(){
body=document.body;
back=$("back");
container=$("container");
main=$("main");
bt=$("bt");
};
vardominit=function(){
setH(back,screenH);
setH(container,screenH);
setH(main,screenW);
};
varevents=function(){
AddEvent(bt,EventsType[0],function(){
varspeed=10;
varmin=0,max=449;
varscrolldown=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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助。

js滚动条平滑移动示例代码

热门推荐

随机推荐