1、之前我们学习的js盒子模型中：client系列/offset系列/scrollwidth/scrollheight都是“只读”的属性-> 只能通过属性获取值，不能通过属性修改元素的样式
2、scrolltop/scrollleft:滚动条卷去的高度/宽度（这两个属性是唯一“可读写”的属性）
box.scrolltop = 0 // 直接回到容器的顶部
我们的scrolltop的值是存在边界值（最大和最小值），我们设置的值比最小值小或者比最大值大都没用，起到效果的依然是边界的值
[最小值是零]
box.scrolltop = -1000;// 直接回到了容器的顶部，没有超出
console.log(box.scrolltop) //0
[最大值 = 真实的高度-当前容器一屏幕的高度]
var maxtop = box.scrollheight - box.clientheight;
scrolltop最经典的应用就是回到顶部，下面代码如下：
1、之前我们学习的js盒子模型中：client系列/offset系列/scrollwidth/scrollheight都是“只读”的属性-> 只能通过属性获取值，不能通过属性修改元素的样式
2、scrolltop/scrollleft:滚动条卷去的高度/宽度（这两个属性是唯一“可读写”的属性）
box.scrolltop = 0 // 直接回到容器的顶部我们的scrolltop的值是存在边界值（最大和最小值），我们设置的值比最小值小或者比最大值大都没用，起到效果的依然是边界的值
[最小值是零]
box.scrolltop = -1000;// 直接回到了容器的顶部，没有超出console.log(box.scrolltop) //0[最大值 = 真实的高度-当前容器一屏幕的高度]
var maxtop = box.scrollheight - box.clientheight;
scrolltop最经典的应用就是回到顶部，下面代码如下： <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
*{
padding:0;
margin:0;
}
html,body{
width:100%;
height:1000%;
background:#11c900;
}
a{
text-decoration: none;
color:#000;
}</style>
</head>
<body>
<a href="javascript:" id="golink">go</a>//a标签本身是跳转页面的，把跳转的地址写在href这个属性中/*1）、不写值的话是刷新本页面
2）、写的如果是#target，是锚点定位，定位到当前页面id为target这个位置
3）、“javascript:”这样写是取消a标签默认跳转的行为*/<script>var golink =document.getelementbyid(golink);/*回到顶部：
总时间（duration）:500ms
频率（interval）：多长时间走一步 10ms
总距离(target): 当前的位置（当前的scrolltop）- 目标的位置(0)
步长(step)：每一次走得距离 (target/duration)*interval *//*这个代码是可以优化的:
开始go按钮是不显示的，当滚动到一定的距离之后，才显示，反之隐藏 只要浏览器的滚动条在滚动，我们就需要判断go显示还是隐藏
浏览器的滚动条滚动:拖动滚动条、鼠标滚轮、键盘上下键、pagedown/pageup键、点击滚动条的空白区域或者箭头（自主操作的行为）...我们还可以通过js控制scrolltop的值来实现滚动条的滚动*/window.onscroll = function computeddisplay(){//不管怎么操作的，只要滚动条动了就会触发这个行为var curtop = document.documentelement.scrolltop || document.body.scrolltop;var curheight = document.documentelement.clientheight || document.body.clientheight;if(curtop>=clientheight){
golink.style.display = block}else{
golink.style.display = none}
}
golink.onclick = function(){this.style.display = none;//并不会消失，因为我们滚动条往回走的时候 又会触发onscroll事件，又会进行显示window.onscroll = null;var duration = 500,interval=10,target=document.documentelement.scrolltop || document.body.scrolltop;var step = (target/duration)*interval;var timer = window.setinterval(function(){var curtop = document.documentelement.scrolltop || document.body.scrolltop;if(curtop===0){
window.clearinterval(timer);
window.onscroll = computeddisplay;//当动画结束后把对应的方法重新绑定给window.onscrollreturn;
}
curtop-=step
document.documentelement.scrolltop = curtop;
document.body.scrolltop = curtop;
},interval)// document.documentelement.scrolltop = 0;// document.body.scrolltop = 0; }</script>
</body>
</html>
以上就是浏览器滚动条的详细介绍的详细内容。