<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script type="text/javascript">
window.onload=function() {
var navbar = document.getElementById('navbar');
var navbarLi = navbar.getElementsByTagName('li');
var content = document.getElementById('content');
var contentDiv = content.getElementsByTagName("div");
for(var i=0;i<navbarLi.length;i++){
navbarLi[i].i=i;
navbarLi[i].onclick=function(){
scroll(contentDiv[this.i]);
}
}
function scroll(obj){
var timer=null;
clearInterval(timer);
timer=setInterval(function(){
if(document.body.scrollTop<obj.offsetTop-380){
document.body.scrollTop+=10;
}
if(document.body.scrollTop>obj.offsetTop-380){
document.body.scrollTop-=10;
}
},1);
}
};
</script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
header{
width: 100%;
height: 300px;
position: fixed;
top: 0;
}
header div{
width: 100%;
height: 300px;
background-color: pink;
margin: 0 auto;
}
nav{
width: 100%;
height: 50px;
position: fixed;
top: 300px;
}
ul{
width: 100%;
height: 50px;
background-color: gray;
margin: 0 auto;
list-style: none;
}
ul li{
width: 23%;
height: 50px;
float: left;
text-align: center;
line-height: 50px;
margin: 0 1% 0;
background-color: black;
color: white;
}
ul li:hover{
cursor: pointer;
}
#content{
width: 100%;
margin: 380px auto 0;
}
#content div{
width: 100%;
height: 500px;
background-color: pink;
margin-bottom: 30px;
}
</style>
</head>
<body>
<header>
<div>
</div>
</header>
<nav>
<ul id="navbar">
<li>111111111111</li>
<li>222222222222</li>
<li>333333333333</li>
<li>444444444444</li>
</ul>
</nav>
<div id="content">
<div>1111111111111111</div>
<div>2222222222222222</div>
<div>3333333333333333</div>
<div>4444444444444444</div>
</div>
</body>
</html>
2 回答
已采纳
刚毅87
TA贡献345条经验 获得超309个赞
将 timer 的定义写在函数外面,代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script type="text/javascript">
window.onload=function() {
var navbar = document.getElementById('navbar');
var navbarLi = navbar.getElementsByTagName('li');
var content = document.getElementById('content');
var contentDiv = content.getElementsByTagName("div");
for(var i=0;i<navbarLi.length;i++){
navbarLi[i].i=i;
navbarLi[i].onclick=function(){
scroll(contentDiv[this.i]);
}
}
//将 timer 的定义放在函数外面
var timer=null;
function scroll(obj){
clearInterval(timer);
timer=setInterval(function(){
if(document.body.scrollTop<obj.offsetTop-380){
document.body.scrollTop+=10;
}
if(document.body.scrollTop>obj.offsetTop-380){
document.body.scrollTop-=10;
}
},1);
}
};
</script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
header{
width: 100%;
height: 300px;
position: fixed;
top: 0;
}
header div{
width: 100%;
height: 300px;
background-color: pink;
margin: 0 auto;
}
nav{
width: 100%;
height: 50px;
position: fixed;
top: 300px;
}
ul{
width: 100%;
height: 50px;
background-color: gray;
margin: 0 auto;
list-style: none;
}
ul li{
width: 23%;
height: 50px;
float: left;
text-align: center;
line-height: 50px;
margin: 0 1% 0;
background-color: black;
color: white;
}
ul li:hover{
cursor: pointer;
}
#content{
width: 100%;
margin: 380px auto 0;
}
#content div{
width: 100%;
height: 500px;
background-color: pink;
margin-bottom: 30px;
}
</style>
</head>
<body>
<header>
<div>
</div>
</header>
<nav>
<ul id="navbar">
<li>111111111111</li>
<li>222222222222</li>
<li>333333333333</li>
<li>444444444444</li>
</ul>
</nav>
<div id="content">
<div>1111111111111111</div>
<div>2222222222222222</div>
<div>3333333333333333</div>
<div>4444444444444444</div>
</div>
</body>
</html>
闹小志
TA贡献75条经验 获得超42个赞
问题来源：定时器
首先需要了解定时器的工作原理：我们通过setInterval函数每隔1毫秒执行一次里面的操作，当里面的这个操作满足什么样的条件的时候我们需要它停止（即清除定时器）
程序的问题：
1、不管你是定义的全局的timer还是局部的timer变量都是可以的
2、clearInterval在这里是没有意义的，你定义的是局部变量，每次click都会把timer初始化成null，null后面紧接着就是clearInterval，你把一个null给清除掉是没有意义的。也就是说这里并没有一个条件，达到这个条件的时候你才需要清除定时器（使用clearInterval）。
3、因为定时器清除没有起到作用，所以timer会一直执行，这个你可以在控制台打印验证一下，即使正确定位到相应的div，可是定时器仍然每1毫秒就执行一次
解决办法：
找到这个让定时器停止的条件。根据程序我猜测应该是点击li的时候，滚动到相应的div，完成这个动作之后就清除掉定时器。那就要思考什么时候才是滚冻到了相应的div，即当 document.body.scrollTop == obj.offsetTop-380 的时候，我们可以确定滚冻到了相应的div。
总结以上，我修改了一下scroll函数：
function scroll(obj){
var timer=null;
timer=setInterval(function(){
console.log("body:"+document.body.scrollTop);
console.log("top:"+(obj.offsetTop-380));
if(document.body.scrollTop<obj.offsetTop-380){
document.body.scrollTop+=10;
}else if(document.body.scrollTop>obj.offsetTop-380){
document.body.scrollTop-=10;
}else{
clearInterval(timer);
}
},1);
}个人理解，酱紫~
添加回答
举报
0/150
提交
取消