JavaScript scrollTo()

红太狼 2020-05-27 12:31 2303阅读 1赞

# JavaScript scrollTo()

当元素或者文档的内容超过其width或者height时，会在横向或者纵向出现滚动条。

这时可以使用鼠标拖动滚动条调整位置，在触屏移动端则可以使用手指拖动调整位置。

JavaScript的scrollTo方法也也可以实现调整规定条位置的功能。

**语法结构一：**

```javascript
element.scrollTo(x-coord, y-coord)
element.scrollTo(options)
```

参数解析：

（1）.x-coord：规定在x轴坐标拖动的尺寸，单位是像素。

（2）.y-coord：规定在y轴坐标拖动的尺寸，单位是像素。

此方法的参数除了可以是两个表示目标横坐标和纵坐标的数字之外，也可以是对象直接量。

简单代码演示如下：

```javascript
options= {
    left: num,
    top: num,
    behavior:behavior
  }
```

此对象具有三个属性，解析如下：

（1）.left：此属性与x-coord参数对应，属性值是一个数字，默认单位是像素。

（2）.top：此属性与y-coord参数对应，属性值是一个数字，默认单位是像素。

（3）.behavior：此属性规定调整是以动画方式完成，还是瞬间完成，具有两个属性值，"auto"与"smooth"。

既然是调整滚动条的位置，那必须在一个坐标系中，否则你无法定位。

坐标系简单图示如下：

![](/images/1590582648841.png)

上图标注的已经很明显了，下面再简单的阐述一下：

（1）.上面是一个div元素用于演示坐标系纯黑色的是边框。

（2）.顶部横向是x轴，向左为正，不包括边框。

（3）.左侧纵向是y轴，向下为正，不包括边框。

浏览器支持:

（1）.IE浏览器不支持此方法。

（2）.edge浏览器不支持此方法。

（3）.谷歌浏览器支持此方法。

（4）.opera浏览器支持此方法。

（5）.火狐浏览器支持此方法。

（6）.safria浏览器支持此方法，但是不支持options参数。

**语法结构二：**

```javascript
window.scrollTo(x-coord, y-coord)
window.scrollTo(options)
```

参数解析：

（1）.x-coord：必需，要在浏览器客户区左上角显示的文档的x坐标。

（2）.y-coord：必需，要在浏览器客户区左上角显示的文档的y坐标。

此方法的参数除了可以是两个表示目标横坐标和纵坐标的数字之外，也可以是对象直接量。

简单代码演示如下：

```javascript
options= {
    left: num,
    top: num,
    behavior:behavior
  }
```

此对象具有三个属性，解析如下：

（1）.left：此属性与x-coord参数对应，属性值是一个数字，默认单位是像素。

（2）.top：此属性与y-coord参数对应，属性值是一个数字，默认单位是像素。

（3）.behavior：此属性规定调整是以动画方式完成，还是瞬间完成，具有两个属性值，"auto"与"smooth"。

浏览器支持:

（1）.IE浏览器支持此方法，但是不支持options参数。

（2）.edge浏览器支持此方法，但是不支持options参数。

（3）.谷歌浏览器支持此方法。

（4）.opera浏览器支持此方法。

（5）.火狐浏览器支持此方法。

（6）.safria浏览器支持此方法，但是不支持options参数。

**代码实例如下：**

```html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style>
#box {
  width:200px;
  height:200px;
  background-color: #ccc;
  margin:50px;
  overflow: auto;
}
#inner{
  width:20px;
  height:400px;
  background-color:red;
}
</style>
<script>
window.onload=function(){
  let obox=document.getElementById("box");
  obox.scrollTo(0,100);
}  
</script>  
</head>
<body>
<div id="box">
  <div id="inner">蒲公英云欢迎您</div>
</div>                        
</body>
</html>
```

进入页面可以看到滚动条的位置发生了位移，这就是通过scrollTo方法设置的。

```html
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style type="text/css">
* {
  padding:0px;
  margin:0px;
}
body {
  width:2000px;
}
div {
  width:20px;
  height:1500px;
  background-color:green;
  margin: 0px auto;
}
</style>
<script type="text/javascript">
window.onload = function () {
  var obt = document.getElementById("bt");
  obt.onclick = function () {
    window.scrollTo(100, 500)
  }
}
</script>
</head>
<body style="height:1500px;">
<input type="button" id="bt" value="点击实现滚动"/>
<div>蒲公英云</div>
</body>
</html>
```

点击按钮可以将文档滚动到指定的坐标。