JS如何控制滚动条

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
span{
position:fixed;
right:10px;
padding:20px;
}
</style>
<script type="text/javascript">
var p=null;
var _top=0;
function init(){
var arg=arguments;
var de=document.documentElement||document.body;
var screenHeight=window.innerHeight||de.clientHeight;
arg.callee.height=screenHeight;
arg.callee.index=0;
var divs=document.getElementsByTagName('div');
for(var i=0;i<divs.length;i++){
divs[i].style.height=screenHeight+'px';
}
var spans=document.getElementsByTagName('span');
for(var i=0;i<spans.length;i++){
spans[i].onclick=function(){
arg.callee.index=this.innerHTML-1;
scroll();
}
}
}
function setScrollTop(){
document.documentElement.scrollTop=_top;
document.body.scrollTop=_top;
p=window.setTimeout(scroll,50);
}
function scroll(){
if(p){
window.clearTimeout(p);
p=null;
}
if(_top>init.index*init.height){
_top--;
setScrollTop();
}else if(_top<init.index*init.height){
_top++;
setScrollTop();
}else{
window.clearTimeout(p);
p=null;
}
}
window.onload=function(){
init();
}
</script>
</head><body>
<span style="top:50px;">1</span>
<span style="top:80px;">2</span>
<span style="top:110px;">3</span>
<div style="background-color:#F00"></div>
<div style="background-color:#0F0"></div>
<div style="background-color:#00F"></div>
</body>
</html>
自己计算下

解决方案 »

  1.   

    我之前写过一个类似的效果，其实不难，不用管滚动条，只需要去关注你要滚的地方的TOP。
    参考地址：http://liuxiaofan.com/2013/12/18/1617.html
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    span{
    position:fixed;
    right:10px;
    padding:20px;
    }
    </style>
    <script type="text/javascript">
    var p=null;
    var _top=0;
    function init(){
    var arg=arguments;
    var de=document.documentElement||document.body;
    var screenHeight=window.innerHeight||de.clientHeight;
    arg.callee.height=screenHeight;
    arg.callee.index=0;
    var divs=document.getElementsByTagName('div');
    for(var i=0;i<divs.length;i++){
    divs[i].style.height=screenHeight+'px';
    }
    var spans=document.getElementsByTagName('span');
    for(var i=0;i<spans.length;i++){
    spans[i].onclick=function(){
    arg.callee.index=this.innerHTML-1;
    scroll();
    }
    }
    }
    function setScrollTop(){
    document.documentElement.scrollTop=_top;
    document.body.scrollTop=_top;
    p=window.setTimeout(scroll,50);
    }
    function scroll(){
    if(p){
    window.clearTimeout(p);
    p=null;
    }
    if(_top>init.index*init.height){
    _top--;
    setScrollTop();
    }else if(_top<init.index*init.height){
    _top++;
    setScrollTop();
    }else{
    window.clearTimeout(p);
    p=null;
    }
    }
    window.onload=function(){
    init();
    }
    </script>
    </head><body>
    <span style="top:50px;">1</span>
    <span style="top:80px;">2</span>
    <span style="top:110px;">3</span>
    <div style="background-color:#F00"></div>
    <div style="background-color:#0F0"></div>
    <div style="background-color:#00F"></div>
    </body>
    </html>