想请教下，自己这段js代码想实现，当滚动的距离小于他的高度时候，就自增10PX向下滚动， 当滚动距离等于他的高度时候，就逐渐自减10px向上移动，这样往复永远循环下去 自己的代码这样写的，只能向下 再向上的时候只能移动一点，怎样可以实现永远上下移动(或是最多只能往返一次，还感觉有卡顿的情况)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="NPP-Plugin">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
.box {width:300px;height:250px;margin:0 auto; border:1px solid #eee;overflow:auto;}
.box1,.box2{width:250px;height:250px;margin:0 auto;border-radius:250px;}
.box1 {border:1px solid #eee;}
.box2 {border:1px solid yellow;}
</style>
</head>
<body>
<div id="box" class="box">
<div class="box1" id="box1">
</div>
<div class="box2" id="box2">
</div>
</div>
<div id="show" class="show"></div>
<script type="text/javascript">
var box= document.getElementById("box");
var box1= document.getElementById("box1");
var box2= document.getElementById("box2");
var show= document.getElementById("show");
box.onscroll = function(e){
show.innerHTML= box.offsetHeight;
show.innerHTML+='<br/>';
show.innerHTML+=box.scrollTop;
show.innerHTML+='<br/>';
//show.innerHTML+=box.scrollHeight;
};
function gopp(){
if(box.scrollTop<box.offsetHeight){
box.scrollTop+=10; //当滚动的距离小于外面容器高度时候就让他不停的10px递增
}
else{
box.scrollTop -= 10; //当滚动距离大于等于0时，就让他不停的以10PX递减 ，希望能永久这样自己判断的上下移动
}
}
window.setInterval(gopp,500);
function gdn(){
box.scrollTop -= 10;
}
</script>
</body>
</html>你的判断条件是有问题的，最后导致的结果就是会在底部一上一下的运动。
我这里加入了一个标明方向的变量，将代码修改如下，就可以实现你说的上下运动了，如果你想要计算来回次数，在声明一个变量，在direction变化的时候累加即可。
// 引入一个判断运动方向的变量 =1 向下 =-1 向上
var direction = 1;
function gopp(){
if (box.scrollTop >= box.offsetHeight) {
direction = -1;
}
else if (box.scrollTop <= 0) {
direction = 1;
};
if(direction == 1) {
box.scrollTop += 10;
}
else if (direction == -1) {
box.scrollTop -= 10;
};
}
var timer = setInterval(gopp, 200);关于解决运动卡顿的问题，不是那么简单就能够说清除的，我模仿jQuery的实现方法，模拟了原生封装运动框架.
并最终保存在了js目录下，你可以去看一看。
你的办法不错哈，多谢分享。 自己再研究研究哈， 自己用下面这个方法 在第三次往后的上下滚动，速度越来越快且卡顿，不知道啥原因
自己试着用下面这样的办法，循环3次以后 ，上下滚动速度越来越快 不知道是啥问题。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="NPP-Plugin">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
.box {width:300px;height:250px;margin:0 auto; border:1px solid #eee;overflow:auto;}
.box1,.box2{width:250px;height:250px;margin:0 auto;border-radius:250px;}
.box1 {border:1px solid #eee;}
.box2 {border:1px solid yellow;}
</style>
</head>
<body>
<div id="box" class="box">
<div class="box1" id="box1">
</div>
<div class="box2" id="box2">
</div>
</div>
<div id="show" class="show"></div>
<script type="text/javascript">
var box= document.getElementById("box");
var box1= document.getElementById("box1");
var box2= document.getElementById("box2");
var show= document.getElementById("show");
var upid;
var doid;
box.onscroll = function(e){
show.innerHTML= box.offsetHeight;
show.innerHTML+='<br/>';
show.innerHTML+=box.scrollTop;
show.innerHTML+='<br/>';
//show.innerHTML+=box.scrollHeight;
};
if(box.scrollTop<box.offsetHeight){
upid=window.setInterval(gopp,500);
}
function gopp(){
box.scrollTop+=10;
if(box.scrollTop>=box.offsetHeight){
window.clearInterval(upid);
doid = window.setInterval(gdn,500);
}
}
function gdn(){
box.scrollTop -= 10;
if(box.scrollTop<=0){
window.clearInterval(doid);
window.setInterval(gopp,500);
}
}
</script>
</body>
</html>