js实现控制整个页面滚动条的位置
更新时间:2022年10月25日 15:58:59 作者:stefanie_sun723
这篇文章主要介绍了js实现控制整个页面滚动条的位置,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
js控制整个页面滚动条位置
方法一
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" 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>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
TypeScript工具类 Partial 和 Required 的场景分析
这篇文章主要介绍了TypeScript工具类 Partial 和 Required 的详细讲解,本文通过场景描述给大家详细讲解工具类的使用,结合实例代码给大家介绍的非常详细,需要的朋友可以参考下2022-09-09JavaScript和ActionScript的交互实现代码
JavaScript和ActionScript的交互实现代码,需要js与flash交互的朋友可以学习下。2010-08-08js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
下面小编就为大家带来一篇js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-08-08JavaScript中async和await的使用及队列详情
这篇文章主要介绍了JavaScript中async和await的使用及队列详情,主要围绕js中async和await简单解析展开面试中可能会问到的关于队列的一些场景和知识点,需要的朋友可以参考一下2022-07-07
最新评论