Window scrollTo() 方法

曾经终败给现在 2022-05-12 00:06 147阅读 0赞

## 定义和用法 ##

scrollTo() 方法可把内容滚动到指定的坐标。

## 语法 ##

scrollTo( *xpos,ypos*)

<table style="border-collapse:collapse;border:0px;color:#333333;font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, STHeiti, 'Microsoft Yahei', sans-serif;font-size:12px;line-height:normal;"> 
 <tbody style="border:0px;"> 
 <tr style="border:0px;background-color:#f6f4f0;"> 
 <th style="border-collapse:collapse;border:1px solid #555555;color:#ffffff;vertical-align:top;background-color:#555555;">参数</th> 
 <th style="border-collapse:collapse;border:1px solid #555555;color:#ffffff;vertical-align:top;background-color:#555555;">描述</th> 
 </tr> 
 <tr style="border:0px;"> 
 <td style="border-collapse:collapse;border:1px solid #d4d4d4;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;">xpos</td> 
 <td style="border-collapse:collapse;border:1px solid #d4d4d4;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">必需。要在窗口文档显示区左上角显示的文档的 x 坐标。</td> 
 </tr> 
 <tr style="border:0px;background-color:#f6f4f0;"> 
 <td style="border-collapse:collapse;border:1px solid #d4d4d4;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;">ypos</td> 
 <td style="border-collapse:collapse;border:1px solid #d4d4d4;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">必需。要在窗口文档显示区左上角显示的文档的 y 坐标。</td> 
 </tr> 
 </tbody> 
</table>

## 实例 ##

1. `<!DOCTYPE html>`
2. `<html>`
3. `<head>`
4. `<meta charset="gb2312">`
5. `<title>菜鸟教程(runoob.com)</title>`
6. `<script>`
7. `function scrollWindow(){`
8. `window.scrollTo(100,500);`
9. `}`
10. `</script>`
11. `</head>`
12. `<body>`
13. ``
14. `<input type="button" onclick="scrollWindow()" value="滚动条"/>`
15. `滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动`
16. ` `
17. ` `
18. ` `
19. ` `
20. ` `
21. ` `
22. ` `
23. ` `
24. `滚动滚动滚动滚动滚动滚动滚动滚动`
25. ` `
26. ` `
27. ` `
28. ` `
29. ` `
30. ` `
31. ` `
32. ` `
33. `滚动滚动滚动滚动滚动滚动滚动滚动`
34. ` `
35. ` `
36. ` `
37. ` `
38. ` `
39. ` `
40. ` `
41. ` `
42. `滚动滚动滚动滚动滚动滚动滚动滚动`
43. ` `
44. ` `
45. ` `
46. ` `
47. ` `
48. ` `
49. ` `
50. ` `
51. `滚动滚动滚动滚动滚动滚动滚动滚动`
52. ` `
53. ` `
54. ` `
55. ` `
56. ` `
57. ` `
58. ` `
59. ` `
60. `滚动滚动滚动滚动滚动滚动滚动滚动`
61. ` `
62. ` `
63. ` `
64. ` `
65. ` `
66. ` `
67. ` `
68. ` `
69. `滚动滚动滚动滚动滚动滚动滚动滚动`
70. ` `
71. ` `
72. ` `
73. ` `
74. ` `
75. ` `
76. ` `
77. ` `
78. `滚动滚动滚动滚动滚动滚动滚动滚动`
79. ` `
80. ` `
81. ` `
82. ` `
83. ` `
84. ` `
85. ` `
86. ` `
87. ``
88. `</body>`
89. `</html>`

## 运行效果 ##

![a261f9e0-3025-3095-a022-7a85c7e5dab0.png][]

[a261f9e0-3025-3095-a022-7a85c7e5dab0.png]: /images/20220512/614f693f73e349b18264e766d53a0d37.png