黑马程序员技术交流社区

标题: 【上海校区】jQuery 之元素滚动 [打印本页]

作者: 不二晨 时间: 2019-1-4 09:30
标题: 【上海校区】jQuery 之元素滚动

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>13_元素滚动</title>
</head>
<body style="height: 2000px;">
<div style="border:1px solid black;width:100px;height:150px;overflow:auto">
This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text.
his is some text.
</div>
<br>
<br>
<br>
<button id="btn1">得到scrollTop</button>
<button id="btn2">设置scrollTop</button>


<script src="js/jquery-1.10.1.js"></script>
<script>
/*
   需求:
   1. 得到div或页面滚动条的坐标
   2. 让div或页面的滚动条滚动到指定位置
   */
//1. 得到div或页面滚动条的坐标
$('#btn1').click(function () {
      console.log($('div').scrollTop()) //获取滚动条的y坐标
      // console.log($('html').scrollTop()+$('body').scrollTop())
      //获取ie/chrome的滚动条y坐标；
      console.log($(document.documentElement).scrollTop() + $(document.body).scrollTop()) // 兼容IE/Chrome
})

//2. 让div或页面的滚动条滚动到指定位置
$('#btn2').click(function () {
      $('div').scrollTop(200)
      $('html,body').scrollTop(300)
})
</script>
</body>

</html>

---------------------
转载，仅作分享，侵删
作者：果敢拼
原文：https://blog.csdn.net/z_x_Qiang/article/details/85565479

作者: 不二晨 时间: 2019-1-10 10:29

奈斯，加油

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2