本文介绍了一种使用JavaScript实现网页元素平滑滚动到顶部的方法，并探讨了如何根据不同页面高度调整滚动时间。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>runcode</title>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metaname="Author"content="Sheneyan"/>
<script>
functions2top(){
vara=document.getElementsByTagName('a');
varl=a.length;
for(vari=0;i<l;i++){
varai=a[i];
if(/#header$/.test(ai.href)){
ai.onclick=function(){
varo=this;
varot=o.offsetTop;
for(vart=0;t<20;t++){
setTimeout("scrollBy(0,-"+parseInt(ot/20)+")",t*50+1);
}
returnfalse;
}
}
}
}
</script>
<bodyonload="s2top()">
</body>
<p>
<script>
for(vari=0;i<1000;i++)
document.write(i+"<br>");
</script>
</p>
<ahref="#header">goto头</a>
</body>demo中的p中的script改大或改小看看。。。移动到top的时间始终是一定的，你也可以设置一个阀值，在页面高度到达这个阀值之前，移动的总时间是多少，当页面高度超过这个数时，移动的总时间反而以一定比例减小，自己试试看吧... http://www.corange.cn/archives/2008/05/1107.html
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>runcode</title>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metaname="Author"content="Sheneyan"/>
<script>
functions2top(){
vara=document.getElementsByTagName('a');
varl=a.length;
for(vari=0;i<l;i++){
varai=a[i];
if(/#header$/.test(ai.href)){
ai.onclick=function(){
varo=this;
varot=o.offsetTop;
for(vart=0;t<20;t++){
setTimeout("scrollBy(0,-"+parseInt(ot/20)+")",t*50+1);
}
returnfalse;
}
}
}
}
</script>
<bodyonload="s2top()">
</body>
<p>
<script>
for(vari=0;i<1000;i++)
document.write(i+"<br>");
</script>
</p>
<ahref="#header">goto头</a>
</body>demo中的p中的script改大或改小看看。。。移动到top的时间始终是一定的，你也可以设置一个阀值，在页面高度到达这个阀值之前，移动的总时间是多少，当页面高度超过这个数时，移动的总时间反而以一定比例减小，自己试试看吧... http://www.corange.cn/archives/2008/05/1107.html
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
