首页IT科技js控制页面滚动到指定位置(js实现控制整个页面滚动条的位置)

js控制页面滚动到指定位置(js实现控制整个页面滚动条的位置)

时间2025-04-29 06:55:07分类IT科技浏览3457
导读:js控制整个页面滚动条位置 方法一...

js控制整个页面滚动条位置

方法一

1            、通过div的scrollTop变动控制垂直滚动条位置            。通过div的scrollLeft变动控制水平滚动条位置                。

示例:

<body> //d1是外层div            ,带滚动条 <div id=d1> <div>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" rel="external nofollow" >aaaaa</a> <div id="test">lalallalalalala</div>

js滚动条属性      、设置滚动条滚动速度

返回不带px的数值,没用负数,最小为0

.scrollTop:竖直滚动条到顶部的距离,即浏览器视口外的高度 .scrollLeft:水平滚动条到最左边的距离 .scrollHeight:滚动内容区域的高度

返回整个窗口的滚动条数值

非ie

返回整个窗口的滚动条数值

document.documentElement.scrollTop:竖直滚动条到顶部的距离 document.documentElement.scrollLeft:水平滚动条到最左边的距离

ie和非ie获得滚动条的兼容写法

var temp=document.documentElement.scrollTop||document.body.scrollTop

设置滚动条速度代码示例

<html> <head> <meta charset="utf-8"> <title>滚动事件</title> <style> div{ height:2000px; } button{ position:fixed; bottom: 100px; right: 100px; } </style> </head> <body> <div> <button class="btn">去那里</button> </div> <script> var button=document.querySelector("button"); button.onclick=function(){ var id=setInterval(function(){ if(document.documentElement.scrollTop>0) { document.documentElement.scrollTop-=100; //当滑动条距顶部为0时,结束间隔任务 if(document.documentElement.scrollTop==0) { clearInterval(id); } } },500); } </script> </body> </html>

以上为个人经验                ,希望能给大家一个参考      ,也希望大家多多支持本站      。

声明:本站所有文章         ,如无特殊说明或标注                ,均为本站原创发布         。任何个人或组织         ,在未征得本站同意时      ,禁止复制         、盗用                、采集         、发布本站内容到任何网站      、书籍等各类媒体平台                。如若本站内容侵犯了原著者的合法权益                ,可联系我们进行处理         。

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
js跨域获取数据的方式(JSONP解决跨域问题) 并发和并行有什么区别(大哥,这是并发不是并行,Are You Ok?)