js控制页面滚动到指定位置(js实现控制整个页面滚动条的位置)
导读: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版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!