html之DOM对象scrollTo()方法(滚动元素)功能简介说明


摘要:
下文讲述DOM对象scrollTo()方法功能说明,如下所示:


DOM scrollTo()方法功能说明

DOM scrollTo()方法功能():
将DOM元素滚动到指定位置
DOM scrollTo()方法语法:
element.scrollTo(x,y)
element.scrollTo(options)
—-参数说明—-
x:在x轴滚动的尺寸(像素)
y:在x轴滚动的尺寸(像素)
采用options对象设置滚动的尺寸的方法
options= {
left: num,
top: num,
behavior:behavior
}
—对象属性值说明
1.left:此属性值同x一致为x轴滚动的尺寸(像素)
2.top:此属性值同y一致为x轴滚动的尺寸(像素)
3.behavior: 此属性设置滚动是以动画还是快速完成,此属性值可以有auto和smooth两个值


DOM scrollTo()方法注意事项:
IE浏览器和edge浏览器不支持此方法
safria浏览器不支持options参数的语法糖
chrome谷歌浏览器、opera浏览器、狐浏览器支持以上两种语法


DOM scrollTo()方法举例说明

例:
使用scrollTo 为一个超链接标签设置href值

 <!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>猫猫教程(www.maomao365.com)
---dom scrollTo方法举例说明
</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("btn");
  obt.onclick = function () {
    window.scrollTo(100, 500)
  }
}
</script>
</head>
<body style="height:1500px;">
<input type="button" id="btn" value="点击实现滚动"/>
<div>猫猫教程</div>
</body>
</html>