JS如何控制滚动条
内容:最近在研究页面的滚动条,我想通过JS来控制滚动条进行上下移动.实现的效果是当我点击一个页面上的按钮,滚动条能滑动对应的页面.效果上可以参考http://icaper.net/,向各位高手请教实现的机制和方法.
------解决方案--------------------
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>无标题文档</title>
<styletype="text/css">
span{
position:fixed;
right:10px;
padding:20px;
}
</style>
<scripttype="text/javascript">
varp=null;
var_top=0;
functioninit(){
vararg=arguments;
varde=document.documentElement
------解决方案--------------------
document.body;
varscreenHeight=window.innerHeight
------解决方案--------------------
de.clientHeight;
arg.callee.height=screenHeight;
arg.callee.index=0;
vardivs=document.getElementsByTagName('div');
for(vari=0;i<divs.length;i++){
divs[i].style.height=screenHeight+'px';
}
varspans=document.getElementsByTagName('span');
for(vari=0;i<spans.length;i++){
spans[i].onclick=function(){
arg.callee.index=this.innerHTML-1;
scroll();
}
}
}
functionsetScrollTop(){
document.documentElement.scrollTop=_top;
document.body.scrollTop=_top;
p=window.setTimeout(scroll,50);
}
functionscroll(){
if(p){
window.clearTimeout(p);
p=null;
}
if(_top>init.index*init.height){
_top--;
setScrollTop();
}elseif(_top<init.index*init.height){
_top++;
setScrollTop();
}else{
window.clearTimeout(p);
p=null;
}
}
window.onload=function(){
init();
}
</script>
</head>
<body>
<spanstyle="top:50px;">1</span>
<spanstyle="top:80px;">2</span>
<spanstyle="top:110px;">3</span>
<divstyle="background-color:#F00"></div>
<divstyle="background-color:#0F0"></div>
<divstyle="background-color:#00F"></div>
</body>
</html>
查询谷 - www.chaxungu.com
JS怎么控制滚动条
编辑：chaxungu时间：2022-10-10 23:24:04分类：web开发