JavaScript中关于滚动scrollBy()与scrollTo()的区别
孟韬
先说结论：
scrollBy(x,y)是根据当前位置来计算的
scrollTo(x,y)是从原点(0,0)开始计算的
x表示向右滚动的像素数，y表示向下滚动的像素数。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>王跃坤</title>
<script>
function Init(){
var pp=document.getElementsByTagName("p");
for(var i=0;i<pp.length;i++)
if(i%10==0)continue;
else pp[i].innerHTML=""+i;
}
function scrollWindow1(){
window.scrollTo(100,200);
}
function scrollWindow2(){
window.scrollBy(100,200);
}
</script>
</head>
<body>
<input type="button" onclick="Init()" value="初始化" />
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
<input type="button" onclick="scrollWindow1()" value="To" />
<input type="button" onclick="scrollWindow2()" value="By" />
<p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
<input type="button" onclick="scrollWindow1()" value="To" />
<input type="button" onclick="scrollWindow2()" value="By" />
<p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
<input type="button" onclick="scrollWindow1()" value="To" />
<input type="button" onclick="scrollWindow2()" value="By" />
<p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
<input type="button" onclick="scrollWindow1()" value="To" />
<input type="button" onclick="scrollWindow2()" value="By" />
<p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
<input type="button" onclick="scrollWindow1()" value="To" />
<input type="button" onclick="scrollWindow2()" value="By" />
<p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
<input type="button" onclick="scrollWindow1()" value="To" />
<input type="button" onclick="scrollWindow2()" value="By" />
<p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
<input type="button" onclick="scrollWindow1()" value="To" />
<input type="button" onclick="scrollWindow2()" value="By" />
<p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
<input type="button" onclick="scrollWindow1()" value="To" />
<input type="button" onclick="scrollWindow2()" value="By" />
<p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
<input type="button" onclick="scrollWindow1()" value="To" />
<input type="button" onclick="scrollWindow2()" value="By" />
<p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
<input type="button" onclick="scrollWindow1()" value="To" />
<input type="button" onclick="scrollWindow2()" value="By" />
<p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
</body>
</html>
说明
先点击初始化按钮，可以初始化所有隐藏的P标签，
然后我们从起始位置开始，分别点击To按钮和By按钮
我们可以发现，在点击第一次的时候To与By的效果是相同的
在之后我们多次点击时发现
1，多次点击To按钮与一次点击To按钮效果是相同的，网页并不会一直向下滚动
2，多次点击By按钮效果是每点击一次，网页下滑200px，直到底端。
类似资料：