js如何控制整个页面滚动条的位置
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js如何控制整个页面滚动条的位置相关的知识，希望对你有一定的参考价值。
点按钮以后想让页面自动向下，asp页面我用了面板
<asp:ScriptManager ID="ScriptManager2" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Always">
好多都不起作用，求一个能用的
有两种方法。
1、通过div的scrollTop变动控制垂直滚动条位置。通过div的scrollLeft变动控制水平滚动条位置。
示例：
<body>
//d1是外层div，带滚动条
<div id='d1' style='height:200px;width:100px;overflow:auto;background:blue;'>
<div style='height:500px;width:500px;background: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
参考技术Awindow.scrollBy(x, y )
x和y就不需要解释了吧 ,
此方法会基于当前的位置进行滚动 (相对位置)
比如 : window.scrollBy(x, 500 ) （假设500是滚动到中间）
然后在调用 window.scrollBy(x, 0 ) 这是时候窗口位置并不会改变，
需要调用 window.scrollBy(x, y－500) 才会滚动到顶部
如果你需要绝对滚动 可以使用 window.scroll(x,y) 不过你要确保你的xy 是不是你理想的值
mozilla window 对象 这里还有其他的滚动方法 希望能帮助到你们,
如果你不是想要窗口滚动,而是 其他的节点进行滚动 方法也是这几个
document.querySelector(' css选择器 ').scroll(0,100)
当然 你也可通过锚点滚动到指定位置
使用时在 a 标签上 加name 值
栗子: <a name="junjie"> 均杰 </a>
放置在目标位置 , junjie 就是一个名字 替换成你的 对于 "均杰" 这两个字 你也可以直接删除 或者替换成你喜欢的 然后改变 url 进行定位
栗子::js --> window.location.hash="#".concat("junjie");
参考技术B 通过div的scrollTop变动控制垂直滚动条位置。通过div的scrollLeft变动控制水平滚动条位置。
示例
<body>
//d1是外层div，带滚动条
<div id='d1' style='height:200px;width:100px;overflow:auto;background:blue;'>
<div style='height:500px;width:500px;background:yellow'>2222</div>
</div>
</body>
<script>
document.getElementById('d1').scrollTop=100;//通过scrollTop设置滚动到100位置
document.getElementById('d1').scrollLeft=200;//通过scrollTop设置滚动到200位置
</script> 参考技术C
推荐用html锚点
就是这样
<a href="#test">aaaaa</a><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="test">lalallalalalala</div>追问
求js代码
追答这是html自带的功能啊 不需要js的
追问我想用js实现。。
追答JS控制滚动条的位置：
window.scrollTo(x,y);
竖向滚动条置顶(window.scrollTo(0,0);
竖向滚动条置底 window.scrollTo(0,document.body.scrollHeight)
JS控制TextArea滚动条自动滚动到最下部
document.getElementByIdx('textarea').scrollTop = document.getElementByIdx('textarea').scrollHeight;
例如:
document.body.scrollTop = document.body.scrollHeight;
固定位置改哪个参数呢？不是最底或者最顶。。。
追答window.scrollTo(x,y);
本回答被提问者和网友采纳JS如何判断浏览器滚动条的位置
参考技术A onload=function()var
changeBG=0,scrollTop=0;
//设置原始变量
setInterval(function()
scrollTop=document.body.scrollTop
if(changeBG&&scrollTop>200)
//判断是否更换了背景及滚动条是否到达指定高度
document.body.scrollTop=0;
//转到页面顶部
document.body.style.backgroundImage="url(...)";
//变换背景
changeBG=1;
//表示已经转换了背景
setTimeout(function()
document.body.scrollTop=changeBG
//返回原来位置
,1000)
,1000)
以上是关于js如何控制整个页面滚动条的位置的主要内容，如果未能解决你的问题，请参考以下文章