Conclusion first:

scrollBy(x,y) is calculated based on the current position
scrollTo(x,y) is calculated from the origin (0,0)
x represents the number of pixels to scroll to the right, and y represents the number of pixels to scroll down.

Code:

<!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>

illustrate

First click the initialization button to initialize all hidden P tags,
then we start from the starting position, click the To button and the By button respectively,
we can find that,The effect of To and By is the same when you click for the first time

We found out when we clicked many times later

1. The effect of clicking the To button multiple times is the same as clicking the To button once. The web page will not scroll down all the
time. 2. The effect of clicking the By button multiple times is that the web page slides down 200px to the bottom for each click.

The difference between scrollBy() and scrollTo() in JavaScript

Conclusion first:

Code:

illustrate

Guess you like