有两种方法。
1、通过div的scrollTop变动控制垂直滚动条位置。通过div的scrollLeft变动控制水平滚动条位置。
示例：
<body>
//d1是外层div，带滚动条
<div id='d1' style='height:200pxwidth:100pxoverflow:autobackground:blue'>
<div style='height:500pxwidth:500pxbackground:yellow'>2222</div>
</div>
</body>
<script>
document.getElementById('d1').scrollTop=100//通过scrollTop设置滚动到100位置
document.getElementById('d1').scrollLeft=200//通过scrollTop设置滚动到200位置
</script>
2、用html锚点
如下：
<a href="#test">aaaaa</a>
<div id="test">lalallalalalala</div>
扩展资料：
1、JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。
（1）、是一种解释性脚本语言（代码不进行预编译）。
（2）、主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。
（3）、可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
（4）、跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。
2、JavaScript脚本语言具有以下特点:
(1)、脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。
(2)、基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。
(3)、简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。
(4)、动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。
(5)、跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支 持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。
参考资料：百度百科：JavaScript
滚动条，顾名思义，就是可以滚动的条（ScrollBar）。准确地说，滚动条通常是我们在页面的内容超过了浏览器显示框的范围的时候，为了能够让有限的空间展示无限的内容所作出的一个妥协的元素，使用它可以让我们查看当前页面内容之外部分的内容。说到这里您估计都还很清楚，但既然我说滚动条也是一个元素，那么它是不是也在我们的HTML中呢？又或者它是浏览器的固有的一部分？
如果您觉得它是HTML中的一部分，那么您就对了，因为它是依附容器而存在的，而默认产生滚动条的容器是<body></body>或者<html></html>节，它并不是浏览器固有的一部分，浏览器只是默认完整展示了一整个html文档，并不知道它中间的内容究竟是否需要滚动条的支持。
那么让我们回顾上面的那几行代码吧，假设fixed对您当前（失败）的浏览器无效的话，那么我们来看看它们的结构，外面是html标签，向内是body标签，再向内则是div标签，div标签很明显是它们的一部分，这样假设我们的div标签所设置的定位属性无论如何（四个可能的属性皆没起到什么作用）改变不了自身显示状况。我们能否更换一个思路呢？
刚才我说了，滚动条是容器所固有的，不管是外面那个滚动条，还是里面那个滚动条。那么我能否让这个需要固定的div和那个body或者html容器脱离关系呢？
看到滚动条的控制可以通过CSS的overflow的几个属性来控制，想必大家都不陌生了。（陌生的朋友点击相关链接即可进入查看）
那么我是否可以自己设置两个完全隔离的div来模拟这种场景呢？
<html>
02.
<head>
03.
<title></title>
04.
<style type="text/css">
05.
06.
html,body {
07.
overflow:hidden
08.
margin:0px
09.
width:100%
10.
height:100%
11.
}
12.
13.
.virtual_body {
14.
width:100%
15.
height:100%
16.
overflow-y:scroll
17.
overflow-x:auto
18.
}
19.
20.
.fixed_div {
21.
position:absolute
22.
z-index:2008
23.
bottom:20px
24.
left:40px
25.
width:800px
26.
height:40px
27.
border:1px solid red
28.
background:#e5e5e5
29.
}
30.
</style>
31.
</head>
32.
33.
<body>
34.
<div class="fixed_div">I am still here!</div>
35.
<div class="virtual_body">
36.
<div style="height:888px">
37.
I am content !
38.
</div>
39.
</div>
40.
</body>
41.
</html>
